jQuery Validate（1） - 简单使用

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

当前最新版本是1.17.0，可以官网下载该插件。插件依赖于jQuery，需要先导入。

官网：https://jqueryvalidation.org/

导入js

<script type="text/javascript" src="xxx/jquery.min.js"></script>
<script type="text/javascript" src="xxx/jquery.validate.min.js"></script>
<!-- 需要中文提示则导入messages_zh.js -->
<script type="text/javascript" src="xxx/messages_zh.js"></script>

使用方式：

1.HTML中直接使用

（1）HTML页面

<form id="registForm" action="success.html" method="get">
    <fieldset>
        <legend>用户注册</legend>
	    <p>
		<label for="username">用户名</label>
		<input type="text" id="username" name="username" required>
	    </p>
	    <p>
		<label for="password">密码</label>
		<input type="password" id="password" name="password" required minlength="6">
	    </p>
	    <p>
	        <label for="repassword">确认密码</label>
		<input type="password" name="repassword" equalTo="#password">
	    </p>
	    <p>
	        <label for="email">邮箱</label>
		<input type="email" id="email" name="email" required>
	    </p>
	    <p>
		<label for="selfIntroduction">个人介绍</label>
		<textarea id="Self-selfIntroduction" name="selfIntroduction" required></textarea>
	    </p>
	    <p>
	        <input type="submit" value="注册">
	    </p>
    </fieldset>
</form>

（2）校验JS

<script type="text/javascript">
    $(function() {
        $.validator.setDefaults({
	    submitHandler: function(form) {
                // 表单提交
	    }
	});
        $("#registForm").validate();
    });
</script>

2.js中校验

（1）HTML页面

<form id="registForm" action="success.html" method="get">
    <fieldset>
        <legend>用户注册</legend>
	<p>
	    <label for="username">用户名：</label>
	    <input type="text" class="form-control" id="username" name="username">
	</p>
	<p>
	    <label for="password1">密码：</label>
	    <input type="password" class="form-control" id="password" name="password">
        </p>
	<p>
	    <label for="repassword">确认密码：</label>
	    <input type="password" class="form-control" id="repassword" name="repassword">
	</p>
        <p>
	    <label for="hobby">爱好：</label>
	    <input type="checkbox"  class="form-control" value="swim" name="hobby">游泳
	    <input type="checkbox" class="form-control" value="game" name="hobby">游戏
	</p>
	<p>
	    <label for="email">性别：</label>
	    <input type="radio" class="form-control" value="male" name="gender">男
	    <input type="radio" class="form-control" value="female" name="gender">女
	</p>
	<p>
	    <input type="submit" class="form-control" value="注册">
	</p>
    </fieldset>
</form>

（2）.校验js

$(function() {    
    // 表单提交的操作 
    $.validator.setDefaults({
        submitHandler: function(form) {
	    // 表单提交
	}
    });
			
    // 校验规则与自定义提示，自定义提示不写时使用默认提示内容
    $("#registForm").validate({
        rules: {
	        username: {
		    required: true
		},
		password: {
		    required: true,
		    minlength: 5
		},
		repassword: {
		    required: true,
		    equalTo: "#password"
		},
		hobby: {
		    required: true
		},
		gender: {
		    required: true
	        }
	},
	messages: {
		username: {
		    required: "用户不能为空"
		},
		password: {
		    required: "密码不能为空",
		    minlength: "密码长度不能低于5位"
		},
		repassword: {
		    required: "确认不能为空",
		    equalTo: "两次密码不一样"
		},
		hobby: {
		    required: "爱好至选择一个"
		},
		gender: {
		    required: "性别不能为空"
		},
	},
        // 自定义错误提示位置，默认直接在校验元素后面
	errorPlacement: function(error, element) {
	    if (element.prop("type") == "checkbox" || element.prop("type") == "radio") {
	        element.parent().append(error);
	    } else {
		element.after(error);
	    }
	},
});

参考菜鸟教程： http://www.runoob.com/jquery/jquery-plugin-validate.html