插件使用一表单验证一validation

jquery-validation是一款前端经验js插件，可以验证必填字段、邮件、URL、数字范围等，在表单中应用非常广泛。

官方网站 https://jqueryvalidation.org/

源码网站 https://github.com/jquery-validation/jquery-validation

---

基本使用

第一步，引入jquery.js

1	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>

第二步，引入js

1	<script src="js/jquery.validate.js"></script>

第三步，在表单中添加属性required

	       <form class="cmxform" id="commentForm" method="get" action="">
				<fieldset>
					<legend>请提供您的姓名，电子邮件地址（不发表）和评论</legend>
					<p>
						<label for="cname" style="margin-left:32px">名称 </label>
						<input id="cname" name="name" minlength="2" type="text" required>
					</p>
					<p>
						<label for="cemail">邮件地址 </label>
						<input id="cemail" type="email" name="email" required>
					</p>
					<p>
						<label for="curl" style="margin-left:32px">网址 </label>
						<input id="curl" type="url" name="url">
					</p>
					<p>
						<label for="ccomment">你的评论 </label>
						<textarea id="ccomment" name="comment" required></textarea>
					</p>
					<p>
						<input class="submit" type="submit" value="提交" style="margin-left:20%">
					</p>
				</fieldset>
			</form>

　　

在表单组件内添加属性required，表示这个组件是必填字段。

第四步，使验证生效。

1 2 3

$().ready(function() {     $("#commentForm").validate(); });

---

默认校验规则

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

required:true              必输字段 remote:"check.php"         使用ajax方法调用check.php验证输入值 email:true                 必须输入正确格式的电子邮件 url:true                   必须输入正确格式的网址 date:true                  必须输入正确格式的日期 dateISO:true               必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 number:true                必须输入合法的数字(负数，小数) digits:true                必须输入整数 creditcard:                必须输入合法的信用卡号 equalTo:"#field"           输入值必须和#field相同，用于比较密码相同否 accept:                    输入拥有合法后缀名的字符串（上传文件的后缀） maxlength:5                输入长度最多是5的字符串(汉字算一个字符) minlength:10               输入长度最小是10的字符串(汉字算一个字符) rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) range:[5,10]               输入值必须介于 5 和 10 之间 max:5                      输入值不能大于5 min:10                     输入值不能小于10

自定义消息提示

第一步和第二步同上面的基本使用一样。

第三步，表单DOM

<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>完整验证表单</legend>
        <p>
            <label for="firstname" style="margin-left:32px">名称</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="lastname" style="margin-left:32px">姓氏</label>
            <input id="lastname" name="lastname" type="text">
        </p>
        <p>
            <label for="username" style="margin-left:16px">用户名</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password" style="margin-left:32px">密码</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">邮件地址</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">选项1
            </label>
            <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">选项2
            </label>
            <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic">选项3
            </label>
			<br>
            <label for="topic" class="error">请选择至少两个您想接收的主题。</label>
        </fieldset>
        <p>
            <input class="submit" type="submit" value="提交" style="margin-left:20%">
        </p>
    </fieldset>
</form>

　　

第四步，自定义验证消息

$("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"  //两次密码比较
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {  // 消息可以自定义
            firstname: "请输入您的名字",
            lastname: "请输入您的姓氏",
            username: {
                required: "请输入用户名",
                minlength: "用户名必须由至少2个字符组成"
            },
            password: {
                required: "请输入密码",
                minlength: "您的密码必须至少有5个字符长。"
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "您的密码必须至少有5个字符长。",
                equalTo: "请再次输入密码"
            },
            email: "请输入有效的电子邮件地址",
            agree: "请接受我们的政策",
            topic: "请选择至少2个主题"
        }
    });

　　

---

按钮点击时验证

使用mvc模式下会采用上面的验证方法，但在ajax提交请求时，表单按钮类型是button不是submit。这时便是按钮点击验证，不是表单提交验证。

1 2 3 4

<form id="buttonForm">  <input type="text" name="userName" id="userName"/>  <button type="button" id="btn-query" onclick="save()">提交</button> </form>

表单提交的按钮类型不是submit，而是button。正常情况不会执行$("#buttonForm").validate({})

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$("#buttonForm").validate({     rules: {         userName: {             required: true,             minlength: 2,                      }     },     messages: {         username: {             required: "请输入用户名",             minlength: "用户名必需由两个字母组成"         }     } });

要执行$("#buttonForm").validate({})，必须在按钮关联的save()方法里调用。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//提交方法 function save() {     // 调用验证，返回验证结果。验证结果是boolean值，验证成功为true，否则为false;     var flag = $("#buttonForm").valid();     if(!flag){         //没有通过验证，退出当前函数，后面的ajax保存不执行         return;     }       var data = $("#buttonForm").serializeArray();     $.ajax({       url: "save.do",       data: data,       success: function(data){                 }     }); }