jQuery插件Validate实现自定义表单验证

本文说明了jQuery Validate表单验证插件，如何定制一个验证方法，并与大家分享，供大家参考。详情如下。

效果如下：

验证失败影响：

验证成功效果：

具体步骤：

1.引入依赖包。

脚本src=' http:/./scripts/jquery-1 . 3 . 1 . js ' type=' text/JavaScript '/script script src=' http 3360 lib/jquery . validate . js ' type=' text/JavaScript '/script 2，添加错误样式和成功样式。

em { font-weight : bold；填充-右侧： 1em；垂直对齐：顶部；} em . error { background : URL(' images/unchecked . gif ')no-repeat 0px 0px；左填充left: 16px} em . success { background : URL(' images/checked . gif ')no-repeat 0px 0px；左填充left: 16px}3.自定义验证方法。

//自定义验证方法$。validator.addmethod ('formula '，//验证方法函数的名称(value，element，param){//验证规则返回值==eval(param)；}、“请正确输入数学公式的计算结果”//验证提示信息)；4.调用样式显示。

Errormelement :' em '，//用于创建错误消息标签success 3360 function(label){//成功验证后执行的回调函数//label指向上面的错误消息标签em label . text(')//清空错误消息。addClass(“成功”)；//添加用户定义的成功类}5。详细代码如下。

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery表单验证插件-自定义一个验证方法/title脚本src='http:/./scripts/jquery-1。3 .1 .js ' type=' text/JavaScript '/script script src=' http : lib/jquery。验证。js ' type=' text/JavaScript '/script style type=' text/CSS ' * { font-family : Verdana；字号： 96%；}标签{宽度： 10毫米向左浮动：} label.error { float:无颜色：红色；左填充左： 5毫米垂直对齐： 顶部；}p { clear:两者；}.提交{左边距： 12em} em { font-weight : bold；填充-右侧： 1em垂直对齐： 顶部；} em。错误{背景： URL('图像/未选中。gif’)无重复0px 0px左填充left: 16px} em。成功{背景： URL('图像/选中。gif’)无重复0px 0px左填充left : 16px }/样式脚本类型='text/javascript' $(文档)。就绪（函数(){ //自定义一个验证方法$.validator.addMethod('formula '，//验证方法名称函数（值、元素、参数){//验证规则返回值==eval(param)；}, '请正确输入数学公式计算后的结果'//验证提示信息);$('#commentForm ').验证({规则s : {用户名： {必需d: true，minlength: 2 }、email: {必需d : true，email: true }、url:'url '、comment: '必需'、valcode 3: {公式： ' 7 9 ' })，消息： {用户名3: {必需d 3360 }请输入姓名，minlength: '请至少输入两个字符}，email: { required: '请输入电子邮件，email: '请检查电子邮件的格式}，url: '请检查网址的格式，评论： '请输入您的评论}，errorElement: 'em '，//用来创建错误提示信息标签成功：函数（标签){ //验证成功后的执行的回调函数//标签指向上面那个错误提示信息标签em标签。文本(')//清空错误提示消息添加类别(”成功");//加上自定义的成功类} });});/script/head body form class=' cmx form ' id=' comment form ' method=' get ' action=' field set legendjQuery表单验证插件-自定义一个验证方法/图例p标签为='cusername '姓名/label em */Emin将id=' cuser name ' name=' username ' size=' 25 '/p p label用于=' cemail '电子邮件/label em */em input id=' cemail ' name=' email ' size=' 25 '/p p label for=' curl '网址/标签em/em输入id=' curl ' name=' URL ' size=' 25 ' value=' '/p p标签为=' ccomment '你的评论/label em */EMT extarea id=' c comment ' name=' comment ' cols=' 22 '/text area/p label for=' cval code '验证码/label input id=' cval code ' name=' valcode ' size=' 25 ' value=' '/=7 9/p p input class=' submit ' type=' submit ' value='提交//p /fieldset /form/body/html本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家学习表单验证有所帮助。