表单验证

2017-12-07

前言

在一个项目中，表单验证是必不可少的。之前对于这部分有点生疏，这次把我知道的几种方式都说明一遍，并且尽可能的给出完整代码。

一、使用js+ajax进行验证

使用js来验证，最主要的问题是：如何进行交互。比如，我在进行用户名验证时，当输入框获取焦点时，进行友好提示“5-25个字符，一个中文为2个字符，推荐使用中文会员名“；当用户输入键盘弹起时，实时记录输入字符的个数；当输入框失去焦点时，显示最终的验证信息：“含非法字符”、“不能为空”等。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无标题文档</title>
    <script src="jquery-2.2.3.min.js"></script>
    <style type="text/css">
        body, form, input{margin:0;padding:0;font-size:12px}
        body{ margin-left:50px}
        .group{
            min-height: 60px;
        }
        .group label{
            display: inline-block;
            width: 80px;
            height: 30px;
            text-align: right;
            vertical-align: middle;
            line-height: 30px;
        }
        .group input{
            width:200px;
            height: 30px;
        }
        #btn{
            width: 100px;
            height: 30px;
            border: none;
            background-color: dodgerblue;
            margin: 0 auto;
            margin-top: 10px;
            color: #ffffff;
        }
        .word-num{
            margin-left: 82px;
            color: #cccccc;
            line-height: 24px;
        }
        i{
            font-style: normal;
        }
        .stronge-rank{
            margin: 5px 0 10px 84px;
        }
        .stronge-rank span{
            display: inline-block;
            width: 40px;
            height: 20px;
            background-color: orange;
            color: #ffffff;
            text-align: center;
            line-height: 20px;

        }
        .stronge-rank span.active{
            background-color: orangered;
        }
    </style>
</head>
<script type="text/javascript">

//    用户名要求
//    1.可以使用字母、数字、汉字、下划线
//    2.长度5-25字符，一个中文2个字符，推荐使用中文用户名

//    密码要求
//    6-16个字符，请使用字母加数字或符号组合密码，不能单独使用字母、数字或者符号

function getLength(str) {
  return  str.replace(/[^x00-xff]/g,"xx").length;
}

//判断字符是否全都相同
//用输入的内容和输入内容的第一个字符进行比较。定义一个临时变量tmp，如果相同，则tmp加1。
// 最后判断tmp是否等于字符串的长度，如果等于说明这是一串字符完全相同的字符串，如aaaaa。
function isSame(str) {
    var tmp = 0;
    for(var i=0;i<str.length;i++){
        if(str.charAt(i)==str[0]){
            tmp++;
        }
    }
    return tmp;
}

    $(window).ready(function () {
        var name_length = 0;
      
		// 用户名
        $("#username").on("focus",function () {
            $(".notice").show();
            $(".notice").html('5-25个字符，一个中文为2个字符，推荐使用中文会员名');
        })
        $("#username").on("keyup",function () {
            $(".word-num").show();
            name_length = getLength(this.value);
            $(".num").html(name_length);
            if(name_length == 0){
                $(".word-num").hide();
            }
        })
        $("#username").on("blur",function () {
            //这个是匹配非法字符的正则，因此，当正则测试为true时，说明匹配到非法字符，输出提示
            var usernameExp = /[^\w\u4e00-\u9fa5]/g;
          
            //含有非法字符
            if(usernameExp.test(this.value)){
                $(".notice").html('含有非法字符');
            }
            //不能为空
            else if(this.value == ""){          
                $(".notice").html("不能为空");
            }
            //不能少于5个字符
            else if(name_length < 5){        
                $(".notice").html("不能少于5个字符")
            } 
            //不能多于25个字符
            else if(name_length > 25){                   
                $(".notice").html("不能多于25个字符")
            }
           //ok 
           else{
                $(".notice").html("ok")
            }
        })

		// 密码
        $("#pwd").on("focus",function () {
            $(".pwdNotice").html(" 6-16个字符，请使用字母加数字或符号组合密码，不能单独使用字母、数字或者符号");
        })
        $("#pwd").on("keyup",function () {
            //当密码强度为中时，确认密码区域才开放，否则不开放
            //字符数大于5为中
            if(this.value.length > 5){
                $(".medium").addClass("active");
                $("#repwd").removeAttr("disabled");
            }else{
                $(".medium").removeClass("active");
                $("#repwd").attr("disabled","true");
            }

            //字符数大于10为强
            if(this.value.length >= 10){
                $(".stronge").addClass("active");
            }else{
                $(".stronge").removeClass("active");
            }
        })
        $("#pwd").on("blur",function () {
            // m为isSame函数的返回值，用输入的内容和输入内容的第一个字符进行比较
            var m = isSame(this.value);

            //非数字的正则，之后正则测试时，false就是全为数字
            var pwdRegNum = /[^\d]/g;     
          
            //非字母的正则，之后正则测试时，false就是全为字母
            var pwdRegStr = /[^a-zA-Z]/g;   
            //不能为空
            if(this.value == ''){
                $(".pwdNotice").html("不能为空");
            }
            //不能全为相同字符
            else if(m == this.value.length){
                $(".pwdNotice").html("不能输入一串相同的值");
            }
            //长度为6-16个字符
            else if(this.value.length < 6 ||this.value.length >16){
                $(".pwdNotice").html("长度应为6-16个字符");
            }
            //不能全为数字
            else if(!pwdRegNum.test(this.value)){
                $(".pwdNotice").html("不能全为数字");
            }
            //不能全为字母
            else if(!pwdRegStr.test(this.value)){
                $(".pwdNotice").html("不能全为字母");
            }
            //ok
            else{
                $(".pwdNotice").html("ok");
            }
        })

		// 确认密码
        $("#repwd").on("blur",function () {
            if(this.value != $("#pwd").val()){
                $(".repwdNotice").html("密码不一致");
            }
        })
    })

</script>
<body>
<h3>要求：</h3>
<p>1. 只能输入5-20个字符，必须以“字母”开头</p>
<p>2. 可以带“数字" “_” “.”的字串</p>
<br />
<form action="">
    <div class="group">
        <label for="username">用户名：</label>
        <input type="text" id="username">
        <i class="notice"></i>
        <div class="word-num" style="display: none;"><span class="num">0</span>个字符</div>
    </div>
    <div class="group">
        <label for="pwd">密码：</label>
        <input type="text" id="pwd">
        <i class="pwdNotice"></i>
        <div class="stronge-rank">
            <span class="weak active">弱</span> <span class="medium">中</span> <span class="stronge">强</span>
        </div>
    </div>
    <div class="group">
        <label for="repwd" >确认密码：</label>
        <input type="text" id="repwd" disabled="disabled">
        <i class="repwdNotice"></i>
    </div>
    <div class="group">
        <label for="btn"></label>
        <input type="button" id="btn" value="提 交">
    </div>
</form>
</body>
</html>
<script>
    $(document).ready(function () {
        $("#btn").on("click",function () {
            var username = $("#username").val();
            $.ajax({
                type: "POST",
                url:"./php/validate.php",
                data:{
                    "username": username,
                },
                success:function (data) {
                    console.log(data);
                }
            })
        })
    })
</script>

二、使用HTML5的自带表单验证功能+ajax

前提：使用HTML5自带表单验证一般是使用正则来规定表单格式，而使用ajax一般是验证用户名有没有重复之类的情况。因此，在表单验证过程中，这两者都需要。

验证发现，在表单中使用button按钮提交表单，不能触发HTML5中自带的表单验证功能。因此，想要使用HTML5的自带表单验证功能，必须使用submit按钮提交表单。

接着发现直接使用submit按钮提交表单会直接提交表单不会触发ajax，因此需要想办法阻止submit按钮的自动提交表单事件。

在JavaScript中，这两种可以阻止标签的默认行为。

1 2	1. e.preventDefault(); 2. return false;

经过验证，发现以上两种都可行！

完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
</head>
<body>
<form action="" id='submitform'>
    <div class="form-group">
        <label for="username">username:</label>
        <input type="text" name="username" required="required" id="username" pattern="[\u4e00-\u9fa5]{2,}" oninvalid="validateIt(this,'姓名必须是中文，而且长度不能小于2')">
    </div>
    <div class="form-group">
        <label for="password">password:</label>
        <input type="text" name="password" required="required" id="password" pattern="[A-Za-z0-9]{6,30}" oninvalid="validateIt(this,'密码长度必须大于6，而且不能有中文')">
    </div>
   <div class="form-group">
        <label for="email">eamil</label>
        <input type="email" id="email">  <!--自带格式验证-->
    </div>
    <input type="submit" value="Submit">
</form>
<script type="text/javascript" language="javascript">
  //用来定义验证弹框，errmsg表示oninvalid中的错误提示信息
    function validateIt(inputelement,errmsg) {
        if(inputelement.validity.patternMismatch){
            inputelement.setCustomValidity(errmsg);    //设置提示信息的方法
        }else{
            inputelement.setCustomValidity("");
        }
        return true;
    }
  
    $("#submitform").on("submit", function(ev) {
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            type: "POST",
            url:"test.php",
            data:{
                "username": username ,
                "password": password,
            },
            success:function (data) {
                console.log(data);
            }

    });
        //阻止submit表单提交
        ev.preventDefault();
 //     return false;
    });
</script>
</body>
</html>

表单验证所涉及的相关属性和方法

属性（方法）	描述
pattern	规定用于验证输入字段的模式（一般用正则规定）。
required	规定必需在提交之前填写输入字段（设置不能为空）。
oninvalid	input元素内的值为无效值时触发的事件
autocomplete	当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。值为true，表示浏览器会自动显示选项，值为false则不可以。
novalidate	规定在提交表单时不应该验证 form 或 input 域。

注意：<input type="email"> 自带格式验证，因此不必像其它input类型那样使用正则来验证。

三、使用jQuery Validate验证

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

1.展示一个最简单的例子。

1）引入文件

1
2
3

<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.min.js"></script>  <!--将提示信息转化为中文的文件-->

2）进行验证

1
2
3

$().ready(function() {
    $("#commentForm").validate();   //最简单的写法
});

3）提交事件

$.validator.setDefaults({
    submitHandler: function() {
       alert("提交事件!");
    }
});

2.通过一个完整的例子，来说明jQuery Validate的使用方法。

默认校验规则

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:”check.php”	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:”#field”	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

validate可选项

可选项	描述
rules	自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。
messages	自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。

完整代码（菜鸟驿站中的例子）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                $.ajax({
                    type:"GET",
                    url:"./php/validate.php?id=1",
                    success:function (data) {
                        console.log(data);
                    }
                })
            }
        });
        $().ready(function() {
    // 在键盘按下并释放及提交后验证提交表单
            $("#signupForm").validate({
                //rules:设置规则，其中username password 所对应的是html中的name的属性值
                // required：必填    minlength: 设置最小长度
                // equalTo: "#password"  指的是该标签的value值和id为password的value值一致
                rules: {
                    username: {
                        required: true,   //必填
                        minlength: 2    //至少为2个字符
                    },
                    password: {
                        required: true,   //必填
                        minlength: 5      //至少为5个字符
                    },
                    confirm_password: {
                        required: true,  //必填
                        minlength: 5,    //至少为5个字符
                        equalTo: "#password"  //和密码输入的值一样
                    },
                    email: {
                        required: true,   //必填
                        email: true       //必须符合email的格式
                    },
                    "topic[]": {
                       //当id为newsletter的标签被选中时，name=topic[]的标签必须设置
                        required: "#newsletter:checked",  
                        minlength: 2    //长度至少为2
                    },
                    agree: "required"    //必填
                },
                messages: {
                    username: {
                        required: "请输入用户名",             //对应required的提示信息
                        minlength: "用户名必需由两个字母组成"  //对应minlength的提示信息
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字母"
                    },
                    confirm_password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字母",
                        equalTo: "两次密码输入不一致"
                    },
                    //只有一个提示信息，表示无论什么情况都显示这条提示信息
                    email: "请输入一个正确的邮箱",
                    agree: "请接受我们的声明",
                    topic: "请选择两个主题"
                }
            });
        });
    </script>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>验证完整的表单</legend>
        <p>
            <label for="username">用户名</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input id="password" name="password" type="password">
        </p>
        <p>
            <label for="confirm_password">验证密码</label>
            <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email">
        </p>
        <p>
            <label for="agree">请同意我们的声明</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
            <label for="newsletter">我乐意接收新信息</label>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
        </p>
        <fieldset id="newsletter_topics">
            <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
            <label for="topic_marketflash">
                <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
            </label>
            <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
            </label>
            <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
            </label>
            <label for="topic" class="error" style="display:none">至少选择两个</label>
        </fieldset>
        <p>
            <input class="submit" type="submit" value="提交">
        </p>
    </fieldset>
</form>
</body>
</html>