正则表达式及js校验表单代码(注册页面)


1、步骤分析

第一步:确定事件(onsubmit)并为其绑定一个函数

第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)

第三步:对用户输入的数据进行判断

第四步:数据合法(让表单提交)

第五步:数据非法(给出错误提示信息,不让表单提交)

问题:如何控制表单提交?

关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值。

onsubmit = return checkForm()



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script>

   

    //用户名的规则:第一位是字母,只有由数字与字母组成,6位。

    function checkName(){

       //获取到了用户名的值

       var userName = document.getElementById("username").value;

       var userSpan = document.getElementById("userId");

       var reg = /^[a-z][a-z0-9]{5}$/i;

       if(reg.test(userName)){

           //符合规则 

           userSpan.innerHTML="正确".fontcolor("green");

           return true;

       }else{

           //不符合规则

           userSpan.innerHTML="错误".fontcolor("red");

           return false;

       }  

    }

   

   

    //校验密码  6位

    function checkPass(){

       var  password  = document.getElementById("pwd").value;

       if(password.length>0){

           var reg = /^\w{6}$/;

           var passSPan = document.getElementById("passId");

           if(reg.test(password)){

              //符合规则 

              passSPan.innerHTML="正确".fontcolor("green");

              return true;

           }else{

              //不符合规则

              passSPan.innerHTML="错误".fontcolor("red");

              return false;

           }

       }

      

    }

   

   

    //检验密码是否正确

    function ensurepass(){

       var  password1 = document.getElementById("pwd").value; //第一次输入的密码

       var password2 = document.getElementById("ensurepwd").value;

       if(password2.length>0){

           var enSpan  = document.getElementById("ensure");

           if(password1.valueOf()==password2.valueOf()){

              enSpan.innerHTML="正确".fontcolor("green");

              return true;

           }else{

              enSpan.innerHTML="错误".fontcolor("red");

              return false;

           }  

       }

    }

   

   

    //校验邮箱

    function checkEmail(){

       var  email  = document.getElementById("email").value;

       var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i;  // .com .com.cn

       var emailspan = document.getElementById("emailspan");

       alert(reg.test(email));

       if(reg.test(email)){

           //符合规则 

           emailspan.innerHTML="正确".fontcolor("green");

          

           return true;

       }else{

           //不符合规则

           emailspan.innerHTML="错误".fontcolor("red");

           return false;

       }  

    }

   

   

    //校验兴趣爱好:至少要算中其中的一个。

    function checkHoby(){

       var likes  = document.getElementsByName("like");

       var hobySpan =document.getElementById("hobbySpan")

       var flag  = false;

       for(var i =  0 ; iif(likes[i].checked){

              flag =true;

              break;

           }  

       }

 

       if(flag){

           //符合规则 

           hobySpan.innerHTML="正确".fontcolor("green");

           return true;

       }else{

           //不符合规则

           hobySpan.innerHTML="错误".fontcolor("red");

           return false;

       }  

    }

   

   

   

    //总体校验表单是否可以提交了 如果返回的true表单才可以提交。上面的表单项必须要每个都填写正确。

    function checkForm(){

       var userName = checkName();

       var pass  = checkPass();

       var ensure  = ensurepass();

       var email = checkEmail();

       var hoby = checkHoby();

       if(userName&&pass&&ensure&&email&&hoby){

           return true;

       }else{

           return false;

       }

      

    }

   

   

   

   

   

 

 

script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>正则表达式title>

head>

<body>                         

<form action="success.html" method="get" onsubmit="return checkForm()"> 

           <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">

              <tr>

                  <td width="25%">姓名:td>

                  <td>

                     <input type="text" name="username" id="username" onblur="checkName()"/>

                        <span id="userId">span>

                  td>

              tr>

              <tr>

                  <td >密码:td><td>

                     <input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>

                        <span id="passId">span>

                  td>

              tr>

              <tr>

                  <td>确认密码:td><td>

              <input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" />                    <span id="ensure">span>

                  td>

              tr>

              <tr>

                  <td>邮箱td><td>

                     <input type="text" name="email" id="email" onblur="checkEmail()"/>

                      <span id="emailspan">span>

                     

                  td>

              tr>

              <tr>

                  <td>性别td><td>

                     <input type="radio" checked="ture" name="gender" id="male" value="male"/><input type="radio" name="gender" value="female"/>td>

              tr>

               

              <tr>

                  <td>爱好:td><td>

                     <input type="checkbox" checked="checked"  name="like" />

                  eat

                     <input type="checkbox" name="like" />

                  sleep

                     <input type="checkbox" name="like"/>

                  play 

                    <span id="hobbySpan">span>

                    td>

              tr>

              <tr>

                  <td>城市td><td>

                  <select name="city" id="city">

                     <option value=""> 请选择option>

                     <option value="bj">北京 option>

                     <option value="gz">广州 option>

                     <option value="sh">上海 option>

                  select>

                   

                    td>

              tr>

              <tr>

                  <td>自我介绍td><td>                <textarea cols="15" rows="5"  name="myInfo" id="myInfo">textarea>td>

              tr>

              <tr align="center">

                  <td colspan="2">

                  <input type="submit"/>

                  td>

              tr>

           table>

       form>

body>

html>

在校验确认密码这部分使用了正则表达式(不需要记忆,需要时查找文档)

正则式.test(校验对象)为真表示符合条件,为假则不符合。

你可能感兴趣的:(web前端,-,JavaScript,JavaScript学习指南)