吴本清博客 - NickorWu - 吴先生

validate、validform

表单提交，相信每个从事IT的码农都会码过，现在各位大神的力作，打包好了各种插件，把表单提交的工作大大的简化，特别是表单数据验证部分，给开发人员节省了很多时间。此乃码农的福祉。

今天介绍用的很广的两款，都基础jQuery使用。使用起来也很方便，很容易上手。

先介绍validate吧

这款相较而言，是鄙人更加喜欢的。

1、先说下他的默认规格吧，罗列在下面

 1) required:true 必输字段
 2) remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
 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:true 必须输入合法的信用卡号
 10) equalTo:"#password" 输入值必须和#password相同
 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

2、这些默认值，可以在初始化的时候进行重新赋值

$.extend($.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
    minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
    rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
    range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: $.validator.format("请输入一个最大为 {0} 的值"),
    min: $.validator.format("请输入一个最小为 {0} 的值")
});

3、当然你也可以在使用的时候，进行提示语传入

$("#myform").validate({
	debug: true, //调试模式取消submit的默认提交功能   
	//errorClass: "label.error", //默认为错误的样式类为：error   
	focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
	onkeyup: false,   
	submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
	    alert("提交表单");   
	    form.submit();   //提交表单   
	},   
	rules:{
	    myname:{
		required:true
	    },
	    email:{
		required:true,
		email:true
	    },
	    password:{
		required:true,
		rangelength:[3,10]
	    },
	    confirm_password:{
		equalTo:"#password"
	    }                    
	},
	messages:{
	    myname:{
		required:"必填"
	    },
	    email:{
		required:"必填",
		email:"E-Mail格式不正确"
	    },
	    password:{
		required: "不能为空",
		rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
	    },
	    confirm_password:{
		equalTo:"两次密码输入不一致"
	    }                                    
	}	  
}); 

4、当然大前提是引入jQuery脚本，并在html表单上进行赋值操作

<form id="myform" method="post" action="">


	<label for="myname">用户名：</label>
	<!-- id和name最好同时写上 -->
	<input id="myname" name="myname" />
    



	<label for="email">E-Mail：</label>
	<input id="email" name="email" />
    



	<label for="password">登陆密码：</label>
	<input id="password" name="password" type="password" />
    



	<label for="confirm_password">确认密码：</label>
	<input id="confirm_password" name="confirm_password" type="password" />
    



	<input class="submit" type="submit" value="立即注册" />
    

</form>

5、下面附上validate下载地址：http://plugins.jquery.com/tag/validate/

再说说validform

这也是一款很不错的表单验证插件，使用起来大同小异。他的功能很强大，可以支持正则表达式。

1、他使用的方法用两种，第一种是直接把验证规格和提示语写在html元素上

<!--ajax实时验证用户名-->
<input type="text" value="" name="name" datatype="e" ajaxurl="valid.php?myparam1=value1&myparam2=value2" sucmsg="用户名验证通过！" nullmsg="请输入用户名！" errormsg="请用邮箱或手机号码注册！" />
<!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />
<!--默认提示文字-->
<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！" datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>

2、还有一种是写在脚本中，绑定规则验证

//绑定表单验证
var _validform = $("#J_add_auth").Validform({
	btnSubmit : "#btn_save",
	btnReset : "#btn_reset",
	tiptype : function(msg, o) {
		
	},			
	tipSweep : true,
	ajaxPost : true,
	beforeCheck : function(curform) {	
	
	},
	beforeSubmit : function(curform) {
		
	},
	callback : function(data) {
		 
	}
});
	
_validform.addRule([
    {
	ele:"title",
	datatype:"*1-20",
	nullmsg:"名称不能为空！",
	errormsg:"名称必须~20个字符以间！"
    }
]);

3、当然前提也是要引入jQuery和相关插件。下面附上下载地址：http://validform.rjboy.cn/demo.html

总结

当然，这里只是粗浅介绍下，把自己所学到的东西，做个笔记，有的例子来源网络，鄙人重新整理，如有侵权请知悉，定马上给予删除。