jquery.validator 和 jquery.form 控件使用的问题 .

    如果使用jquery.validator 验证框架,那么form表单要放在table之外,不然会出现错误信息加载两次,并导致remote验证不能使用的情况,另外不能和jquery.form使用,不然会导致表单虽然不通过验证,但是依然提交的情况,如果一定要使用,则必须放在validator的submitHandler函数中执行ajaxSubmit操作。

  

 

先上张验证表单的效果吧:

jquery.validator 和 jquery.form 控件使用的问题 .jquery.validator 和 jquery.form 控件使用的问题 .

 

 

   

 

 

1、首页要在页面中引入js

 

  <script src="/jquery-1.3.2.min.js" type="text/javascript"></script>

  <script src="/jquery.validate.js" type="text/javascript"></script>  

   <script src="/jquery.form.js" type="text/javascript"></script>   

2、js核心代码

 

jQuery(document).ready(function() {

/*commentform是你页面中的form表单的id,例如:

<form id="commentform" action="#" method=post>

<DIV id=author_info> <P><INPUT id=author tabIndex=1 name="user"><LABEL for=author><SMALL>姓名:</SMALL> </LABEL> </P> <span id="a"></span> <P><INPUT id=email tabIndex=2 name="email"> <LABEL for=email><SMALL>邮箱:</SMALL> </LABEL></P> <span id="b"></span> <P><INPUT id=url tabIndex=3 name=url><LABEL for=url><SMALL>网址:</SMALL></LABEL></P> <span id="c"></span> </DIV>  <BR><TEXTAREA id=comment onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('submit').click();return false};" onpropertychange="checklen(this)" name=content rows=14 cols=100 maxlength="250" ></TEXTAREA>  <br>文明上网,理性发言,您还可输入<span id="tno"></span>个字符<p>  <span id="d"></span><p>

</FORM>

*/

//开始验证规则  jQuery("#commentform").validate({   rules: {    user: {     required: true,     maxlength: 10    },    email: {     required: true,     email: true    },    url: {     required: true,     url: true    },    content: "required"   },   messages: {    user: {     required: '请输入姓名',     maxlength: '用户名应小于10个字符'    },    email: {     required: '请输入邮箱',     email: '请检查邮箱格式(例如:[email protected])'    },    url: {     required: '请输入您的网址',     url: '请输入正确格式的网址(例如:http://www.baidu.com)'    },    content: '请输入您的评论'   },

  //当点击提交按钮时执行submitHandler函数

  submitHandler: function(form) {    jQuery(commentform).ajaxSubmit({     url: "./xxx.do?method=save",     data: jQuery('#commentform').formSerialize(),     type: 'POST',     beforeSubmit: function()      {      jQuery('#loading').show();     },     success: function(data) {      if (data == "success") {       jQuery('#loading').hide();       //此处可以用ajax方式得出刚刚的留言,显示到页面上      }       else {       alert("留言出错了");      }     }    });    //当验证没通过时不予以提交表单    return false;   },   //当验证没通过时显示错误的样式   errorPlacement: function(error, element) {    if (element.attr("name") == "user")     {     error.appendTo("#a");    }    if (element.attr("name") == "email")     {     error.appendTo("#b");    }    if (element.attr("name") == "url")     {     error.appendTo("#c");    }    if (element.attr("name") == "content")     {     error.appendTo("#d");    }   },   errorElement: "em",//可以用其他标签,记住把样式也对应修改   success: function(span) {    span.text("正确").addClass("success");//加上自定义的success类,当验证通过时提示正确   }  }); });

 

 

3、在页面中引入提示信息的样式(验证通过时提示输入正确,没通过时提示错误)

 

 <style type="text/css">

em.error {   background:url("/common/validation/images/unchecked.gif.png") no-repeat 0px 0px;   padding-left: 16px; } em.success {   background:url("/common/validation/images/checked.gif.png") no-repeat 0px 0px;   padding-left: 16px; }

</style>

 

这样利用jquery validate 和jquery form 插件组合实现表单验证和无刷新提交的功能就实现了,是不是很简单呢?

你可能感兴趣的:(Validator)