深入学习jQuery验证表单验证

本文实例介绍了jQuery验证表单验证，主要是利用jquery.metadata.js将校验规则直接写在班级属性里面并定义错误信息的提示，分享给大家供大家参考，具体内容如下

1、添加一个另外一个插件jquery.metadata.js并把校验规则写在控件里面。2、需要改写触发校验的方式。

$('#commentForm ').validate({ meta : ' validate ' })；3、详细代码如下：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejQuery表单验证插件-利用jquery.metadata.js将校验规则写到控件中/title脚本src='http:/./scripts/jquery-1。3 .1 .js ' type=' text/JavaScript '/script script src=' http : lib/jquery。验证。js ' type=' text/JavaScript '/script script src=' http : lib/jquery。元数据。js ' type=' text/JavaScript '/script style type=' text/CSS ' * { font-family 3360 Verdana；字号： 96%；}标签{宽度： 10毫米向左浮动：} label.error { float:无颜色：红色；左填充左： 5毫米垂直对齐： 顶部；}p { clear:两者；}.提交{左边距： 12em} em { font-weight : bold；填充-右侧： 1em垂直对齐： 顶部；}/样式脚本类型='text/javascript' $(文档)。ready(function(){ $(' # comment form ')).validate({ meta : ' validate ' })；});/script/head body form class=' cmx form ' id=' comment form ' method=' get ' action=' field set legendjQuery表单验证插件-利用jquery.metadata.js将校验规则写到控件中/图例p标签为='cusername '姓名/label em */Emin put id=' cuser name ' name=' username ' size=' 25 ' class=' { validate : {必需d : true，最小长度：2 } } /p p标签为=' cemail '电子邮件/label em */em input id=' cemail ' name=' email ' size=' 25 ' class=' { validate : { required d : true，email : true } } '/p p label for=' curl '网址/label em/em输入id=' curl ' name=' URL ' size=' 25 ' value=' class=' { validate : { URL : true } } //p p标签为=' ccomment '你的评论/label em */EMT extarea id=' c comment ' name=' comment ' cols=' 22 ' class=' { validate : { required d : true } } '/text area/p p input class=' submit ' type=' submit ' value='提交//p /fieldset /form/body/html默认校验规则：

(1)要求：道必输字段(2)远程：”检查。PHP "使用创建交互式、快速动态网页应用的网页开发技术方法调用check.php验证输入值(3)电子邮件：必须输入正确格式的电子邮件(4)网址：路径必须输入正确格式的网址(5)日期：过去必须输入正确格式的日期日期校验ie6出错，慎用(6)日期：过去必须输入正确格式的日期（国际标准化组织),例如：2009-06-23,1998/01/22 只验证格式，不验证有效性(7):路必须输入合法的数字（负数，小数)(8)位数：树必须输入整数(9)信用卡：必须输入合法的信用卡号(10)等于：'#field '输入值必须和#字段相同(11)接受：输入拥有合法后缀名的字符串（上传文件的后缀)(12)maxlength:5输入长度最多是5的字符串（汉字算一个字符)(13)最小长度：10输入长度最小是10的字符串（汉字算一个字符)(14)范围长度：[5,10]输入长度必须介于5和10 之间的字符串')(汉字算一个字符)(15)范围：[5,10]输入值必须介于5和10 之间(16)max:5输入值不能大于5 (17)分钟：10输入值不能小于10 默认提示：

消息{ required: '此字段为必填字段，remote: '请修复此字段，电子邮件："请输入有效的电子邮件地址“，url:”请输入有效的url，”,日期："请输入有效的日期。",日期ISO: "请输入有效的日期（国际标准化组织)。",日期： ' Bitte geben Sie in g眉"基准日期",数字："请输入一个有效的数字“，数字：”您可以在任何地方使用它，digits: '请只输入数字，信用卡： '请输入有效的信用卡号码，等于："请再次输入相同的值”，accept:”请输入带有效扩展名的值”，maxlength : $。验证器。格式('请输入不超过{0}个字符)，最小长度：美元。验证器。格式('请至少输入{0}个字符)，范围长度： $。验证器。格式('请输入长度介于{0}和{1}个字符之间的值。'),范围： $.validator.format('请输入一个介于{0}和{1}之间的值.)，max: $.validator.format('请输入一个小于或等于{0}的值)，min: $.validator.format('请输入大于或等于{0}的值。)},4、效果图如下：

5、注意：使用class='{} '的方式，必须引入包：jquery.metadata.js。可以使用如下的方法，修改提示内容：

class=' { required:true，minlength:5，messages: { required: '请输入内容'}}'在使用等于关键字时，后面的内容必须加上引号，代码如下所示：

class=' { required:true，minlength:5，equalTo:'#password'}'6，直接在班级属性里面定义错误信息的提示。

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery表单验证插件-利用jquery.metadata.js将校验规则写到控件中(2)/标题脚本src='http:/./scripts/jquery-1。3 .1 .js ' type=' text/JavaScript '/script script src=' http : lib/jquery。验证。js ' type=' text/JavaScript '/script script src=' http : lib/jquery。元数据。js ' type=' text/JavaScript '/script style type=' text/CSS ' * { font-family 3360 Verdana；字号： 96%；}标签{宽度： 10毫米向左浮动：} label.error { float:无颜色：红色；左填充左： 5毫米垂直对齐： 顶部；}p { clear:两者；}.提交{左边距： 12em} em { font-weight : bold；填充-右侧： 1em垂直对齐： 顶部；}/样式脚本类型='text/javascript' $(文档)。ready(function(){ $(' # comment form ')).validate({ meta : ' validate ' })；});/script/head body form class=' cmx form ' id=' comment form ' method=' get ' action=' field set legendjQuery表单验证插件-利用jquery.metadata.js将校验规则写到控件中(2)/图例p标签为='cusername '姓名/label em */Emin put id=' cuser name ' name=' username ' size=' 25 ' class=' { validate : {必需d : true，minlength:2，messages 3360 {必需d : }请输入姓名，minlength: '请至少输入两个字符}}}'//p p标签为='cemail '电子邮件/label em */em input id=' cemail ' name=' email ' size=' 25 ' class=' { validate : {必需d : true，email:true，messages : {必需d : }请输入电子邮件，email: '请检查电子邮件的格式}}}'//p p标签为='卷曲'网址/label em/em输入id=' curl ' name=' URL ' size=' 25 ' value=' class=' { validate : { URL : true，messages : { URL : }请检查网址的格式}}}'//p p标签为='ccomment '你的评论/label em */EMT extarea id=' ccomment ' name=' comment ' cols=' 22 ' class=' { validate : {必需d : true，messages : {必需d : }请输入您的评论} } } '/text area/p p input class=' submit ' type=' submit ' value='提交//p /fieldset /form/body/html7、效果如下：

以上就是本文的全部内容，希望对大家学习jQuery验证表单验证有所帮助，最近更新了不少关于jQuery验证表单验证的文章，大家可以结合进行学习。