5_1表单验证案例

叁歲伎倆 2023-09-27 15:09 50阅读 0赞

验证要求:

用户名不能为空

用户名长度大于等于6

用户名中不能有数字

密码不少于5位

两次密码必须一致

邮箱格式正确 必须有@和. 例如[123456789@qq.com][123456789_qq.com]

实现效果:

![cff804cc67e312f1b8b9e8860b37e1de.png][]

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script type="text/javascript" src="js/jquery.min.js"></script>
                    <script>
                            function checkUsername(){
                                    var username =$("#user").val();
                                    if(username == ""){// 不能为空字符串
                                            $("#usertip").html("<font color='red'>不能为空</font>");
                                            return false;
                                    }
                                    
                                    if(username.length<=6){// 长度不能少于6位
                                            $("#usertip").html("<font color='red'>长度必须在6位之上</font>");
                                            return false;
                                    }
                                    
                                    for(var i =0;i<username.length;i++){// zhangsan
                                            var c =username.charAt(i);
                                            if(c<= '9' && c>= '0'){
                                                    $("#usertip").html("<font color='red'>不能使用数字</font>");
                                                return false;
                                            }
                                    }
                                    // 提示OK
                                    $("#usertip").html("<font color='green'>OK</font>")
                                    return true;
                                    
                            }
                            
                            function checkPassword(){
                                    var pwd =$("#pwd").val();
                                    if(pwd.length<5){
                                            $("#pwdtip").html("<font color='red'>长度不能少于5位</font>");
                                            return false;
                                    }
                                    $("#pwdtip").html("<font color='green'>OK</font>");
                                    return true;
                            }
                            
                            function checkRepwd(){
                                    var p1=$("#pwd").val();
                                    var p2=$("#repwd").val();
                                    
                                    if(p1.length< 5 || p1 != p2){
                                       $("#repwdtip").html("<font color='red'>两次密码不一致</font>");
                                       return false;
                                    }
                                    
                               $("#repwdtip").html("<font color='green'>OK</font>");
                               return true;
                            }
                            
                            function checkEmail(){
                                    var em=$("#email").val();
                                    var index1=em.indexOf("@");
                                    var index2=em.indexOf(".");
                                    if(index1<1 || index2 < 1 ){
                                            $("#emailtip").html("<font color='red'>邮箱格式有误</font>");
                                        return false;
                                    }
                                    $("#emailtip").html("<font color='green'>OK</font>");
                                    return true;
                            }
                            
                            function checkForm(){
                                    return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail();
                            }
                    </script>
            </head>
            <body>
                    <table id="center" border="0" cellspacing="0" cellpadding="0">
                            <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
                                    <tr>
                                            <td>您的姓名：</td>
                                            <td>
                                                    <input id="user" type="text" name="username" onblur="checkUsername()"/>
                                                    <div id="usertip" style="display: inline;"></div>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>输入密码：</td>
                                            <td>
                                                    <input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
                                                    <div id="pwdtip" style="display: inline;"></div>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>再输入一遍密码：</td>
                                            <td>
                                                    <input id="repwd" type="password" onblur="checkRepwd()"/>
                                                    <div id="repwdtip" style="display: inline;"></div>
                                            </td>
                                    </tr>
                                    <tr>
                                            <td>您的Email：</td>
                                            <td>
                                                    <input id="email" type="text" onblur="checkEmail()"/>
                                                    <span id="emailtip"></span>
                                            </td>
                                    </tr>
                                    <tr>
                                            
                                            <td colspan="2">
                                                    <input type="submit" value="注册" class="rb1" />
                                            </td>
                                    </tr>
                            </form>
                    </table>
            </body>
    </html>

![90ac74002a1a20ddea51364c57b0a967.gif][]

![7a1d767f91546607274d7086c115da66.gif][]

总结：

1.对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件,onsubmit绑定的方法时要有return关键字,绑定的方法要返回true/false

2.表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型

3.表单的验证和String对象有密切关系 length charAt(i) indexOf("@")

4.如果表单项内容为空，js收到的不是null，而是空字符串。判断条件不能写 username == null，而要写username==""或username.length ==0

5.验证出错要return false，验证无错要return true，并且 οnsubmit="return checkForm()

6.该示例的缺点主要在于对于邮箱如果采用传统方式进行验证，代码繁琐并且不能保证严谨性,过度依赖String的API。对于邮箱、手机号码、邮政编码等验证，可以使用正则表达式进行验证，严谨而且简单。

[123456789_qq.com]: mailto:123456789@qq.com
[cff804cc67e312f1b8b9e8860b37e1de.png]: https://img-blog.csdnimg.cn/img_convert/cff804cc67e312f1b8b9e8860b37e1de.png
[90ac74002a1a20ddea51364c57b0a967.gif]: https://img-blog.csdnimg.cn/img_convert/90ac74002a1a20ddea51364c57b0a967.gif
[7a1d767f91546607274d7086c115da66.gif]: https://img-blog.csdnimg.cn/img_convert/7a1d767f91546607274d7086c115da66.gif