validate 基础使用 自定义验证 主动触发 修改错误提示的显示位置

jquery validate 基础使用

首先假设我们的 HTML 结构代码

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<form id="form">
	<input name="input1" id="input1"                   placeholder="请输入身份证号码" />
	<input name="pwd"    id="pwd"    type="password"   placeholder="请输入密码"/>
	<input name="rpwd"   id="rpwd"   type="password"   placeholder="请确认密码" />
	<button id="subBtn">提交</button>
</form>

ps：引入 jquery validate 之前需要引入 jquery

为表单添加基础验证 自定义提示信息

$("#form").validate({ // 只能绑定 form 标签
	rules: {
		"input1": { // 只能以 name 属性进行绑定， 与 id 值没有关系
			"required": true, // 表示：输入框不能为空
		},
		"pwd": {
			"required": true,  // 表示： 必须输入
			"minlength": 6 // 输入字符串的长度不能低于 6
		},
		"rpwd": {
			equalTo: "#pwd", // 输入的值必须与 id 为 pwd 输入框中的值一致
		}
	},
	messages: { // 如果没能生效自定义提示信息，就仔细对比一下 messages 单词有没有写错
		"input1": {
			"required": "身份证号码不能为空",
		},
		"pwd": {
			"required": "密码不能为空", 
			"minlength": "密码的长度不能低于6位"
		},
		"rpwd": {
			equalTo: "两次输入的密码不一致",
		}
	}
});

ps： 所以的提示信息会在对应的错误出现后在页面自动生成

ps： 错误提示信息会包裹在页面自动生成的<label class="error">错误提示信息</label>标签中

ps： 所以在css中设置 lable.error{} 的样式就可以设置提示样式

添加自定义验证 （正则表达式验证）

// 假设我们现在要为身份证号码添加自定义规则验证
rules: {
	"input1": { 
		"required": true, 
		"regx": /^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$/  // 添加正则验证方式 
	}
},
messages: { 
	"input1": {
		"required": "身份证号码不能为空",
		"regx": "身份证输入有误，请查正之后重新输入！" // 对应错误提示信息
	}
}

/**************************************
 * aim: 定义自定义错误的验证方式（正则验证）
 * @param {Object}   value    输入框的值
 * @param {DOM}      element  接收输入结果的DOM对象，input 框
 * @param {String}   param    自定义验证方式的 参数 ，这里对应设置的正则表达式
 * @return {Boolean}          返回值： false 验证失败，展示错误提示 | true 验证成功
 **********************************/
$.validator.addMethod("regx", function(value, element, param) {
	return param.test(value); // 返回false代表验证不通过，展示提示信息
}, "第三个参数：可选，错误提示信息");

主动触发表单验证

$("#subBtn").click(function () {
	$("#form").validate();
	if ($("#form").valid()) {
		// ... 发送ajax
	}
});

注意这里必须调用 validate() & valid() 才会触发表单的验证
同时调用两个方法哟！！！

修改错误提示的显示位置

rules:{
	...
	errorPlacement: function(error, element) { // 验证失败时执行的方法
		 // error: 提示的错误信息， error[0].innerHTML ： 定义的错误提示文字
		 // element： 触发错误的元素(input 输入框)
	},
	success: function (a, b){ // 验证成功时执行的方法
		
	}
	...
}

ps： 一般来说如果需要自定义错误的提示位置，只需要添加 errorPlacement 就可以了
ps： 但是如果输入的信息正确，也不会移除错误提示信息的话，就加上 success 试试，哪怕function中不做任何操作

最后是附上相关的验证规则以及相关操作