js的表单数据校验插件jquery.validate.min.js的使用

jquery.validate.min.js这个插件就是为了减轻前端的数据校验工作

正常的使用我就说了，只说一下自定义校验的方法：

这里需要做一个手机号的校验，需要用到手机号的正则表达式来校验，因为插件里默认的没有这个校验，所有需要自定义方法来校验了，当然通过这次试验，今后无论什么校验只要有正则表达式都能校验了。

需要的js：

jquery.js和jquery.validate.min.js,获取方式百度上导出都是，

html代码：

<form action="" id="infoForm" name="infoForm">
<input id="score" name="score" type="number" placeholder="请输入高考成绩" required min="0" max="750" digits="true">
<input id="user_phone" name="user_phone" type="number" placeholder="请输入手机号">
<input type="submit" value="下一步">
</form>

都说校验，form表单是少不了的咯，这里面格外注意的是，这个插件只认name=""属性值的，name的值千万不能重复，重复了会怎样你可以试试。其他的一写简单属性就不讲解，都可以百度的到，到处是教程。重要记录一下手机号码的校验：

js代码：

$(function(){
		//$("#infoForm").validate();/*一般使用默认有的验证就这样就可以了，如果你想js自定义验证方式的话，就需要写以下代码了*/
		//初始化表单验证插件开始，验证方式和验证报错信息这里面是分开写的，都以输入框的name值打头，逗号隔开
		$("#infoForm").validate({
			/*验证方式*/
			rules:{
				user_phone:{
					required:true,
					minlength : 11,
					maxlength : 11,
					isMobile : true  
				}
			},
			/*验证报错信息*/
			messages:{
				user_phone:{
					required:"请正确输入手机号",
					minlength : "确认手机号不能小于11个字符",
					maxlength : "确认手机号不能大于11个字符",
					isMobile : "请正确填写您的手机号码"  
				}
			}
		});
		
		// 手机号码验证  自定义
		$.validator.addMethod("isMobile", function(value, element) {  
		    var length = value.length;  
		    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
		    return this.optional(element) || (length == 11 && mobile.test(value));  
		}, "请正确填写您的手机号码");  
/*提交按钮方法实现 Start*/
	$.validator.setDefaults({
		submitHandler: function() {
		  //alert("提交事件!");
		  jixu();
		}
	});
});
		//初始化表单验证插件结束

/*提交按钮方法实现 Start*/
	$.validator.setDefaults({
		submitHandler: function() {
		  alert("提交事件!");
		  //jixu();
		}
	});
	/*提交按钮方法实现 End*/
</script>

涉及到数据安全这块，仅仅是前端校验还远远不够，需要后台也加入进来，一些常识性的校验就需要后台来做：sql注入、xss攻击，包括基础数据的校验也需要再在后台程序上再来一遍；防sql注入校验，和xss攻击校验在百度上都可以收到工具类！