jQuery插件生效实现自定义校验结果样式

本文实例介绍了jQuery插件生效实现自定义校验结果样式的详细代码，分享给大家供大家参考，具体内容如下

效果如下：

具体步骤：

1、引入依赖包

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

艾米。错误{背景： URL('图像/未选中。gif’)无重复0px 0px左填充left: 16px} em。成功{背景： URL('图像/选中。gif’)无重复0px 0px左填充left: 16px}3、自定义提示信息

消息： {用户名： {必填项d : }请输入姓名，minlength: '请至少输入两个字符}，email: { required: '请输入电子邮件，email: '请检查电子邮件的格式}，url: '请检查网址的格式，评论： '请输入您的评论' }, 4、调用错误样式，或是成功样式

errorElement: 'em '，//可以用其他标签，记住把样式也对应修改成功：函数（标签){//标签指向上面那个错误提示信息标签em标签。文本(')//清空错误提示消息添加类别(”成功");//加上自定义的成功类} 5、详细的代码

html头元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' $(文档)。ready(function(){ $(' # comment form ')).验证({规则s : {用户名： {必需d:为真，minlength:为2 }，email: {必需d :为真，email 3:为真}，url:'url '，注释： '必需' }，消息： {用户名： {必需d : '请输入姓名，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=' CCO mment ' name=' comment ' cols=' 22 ' row=' 2 '/text area/p p input class=' submit ' type=' submit ' value='提交//p /fieldset /form/body/html以上就是本文的全部内容，希望对大家的学习有所帮助。