Jquery form Validation

表单验证一直是一个大问题,但是有了jquery,有了form validation plugins,一切就变得简单了。

点此查看官方说明文档

来看个简单的例子:http://www.live-my-life-with-yuyi.com/lab/jquery/validation/

下载  http://formvalidator.vicp.cc/download.html

实现代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test for jQuery validate() plugin</title>
  6. <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
  7. <script src="js/jquery.js" type="text/javascript"></script>
  8. <script src="js/cmxforms.js" type="text/javascript"></script>
  9. <script src="js/jquery.metadata.js" type="text/javascript"></script>
  10. <script src="js/jquery.validate.min.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. $.meta.setType("attr", "validate");
  13. $.validator.setDefaults({
  14. submitHandler: function() { alert("submitted!"); }
  15. });
  16. $().ready(function() {
  17. // validate the comment form when it is submitted
  18. $("#commentForm").validate({
  19. messages:{
  20. cname:"请输入用户名",
  21. cemail:{
  22. required:"电子邮件不能为空",
  23. email:"电子邮件格式不正确"
  24. },
  25. curl:"URL格式不对",
  26. ccomment:"留言不能为空"
  27. }
  28. });
  29. });
  30. </script>

先载入4个js文件,放心这四个文件都很小

  1. $.meta.setType("attr", "validate");

这句话的意思是设置一个标签,然后在这个标签里,定义相关的属性,比如required,minLength等等

  1. $.validator.setDefaults({
  2. submitHandler: function() { alert("submitted!"); }
  3. });

这个函数会在所有验证都通过时触发,提交表单。

 

  1. $("#commentForm").validate({
  2. messages:{
  3. cname:"请输入用户名",
  4. cemail:{
  5. required:"电子邮件不能为空",
  6. email:"电子邮件格式不正确"
  7. },
  8. curl:"URL格式不对",
  9. ccomment:"留言不能为空"
  10. }
  11. });

这个是自定义错误信息,属性对应的是表单项的name,值对应的是当验证不通过时的错误信息。就这么简单,验证部分就做完了。

再来看看表单部分

  1. <form class="cmxform" id="commentForm" method="get" action="">
  2. <fieldset>
  3. <legend>A simple comment form with submit validation and default messages</legend>
  4. <p>
  5. <label for="cname">Name (required, at least 2 characters)</label>
  6. <input id="cname" name="cname" class="some other styles " validate = "required:true,minLength:2" />
  7. <div> </p><p>
  8. <label for="cemail">E-Mail (required)</label>
  9. <input id="cemail" name="cemail" validate = "required:true,email:true" />
  10. </p>
  11. <p>
  12. <label for="curl">URL (optional)</label>
  13. <input id="curl" name="curl" validate = "url:true" value="" />
  14. </p>
  15. <p>
  16. <label for="ccomment">Your comment (required)</label>
  17. <textarea id="ccomment" name="ccomment" validate = "required:true"></textarea>
  18. </p>
  19. <p>
  20. <input class="submit" type="submit" value="Submit"/>
  21. </p>
  22. <p>
  23. <label for="spam_email">
  24. <input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />
  25. Spam via E-Mail
  26. </label>
  27. <label for="spam_phone">
  28. <input type="checkbox" id="spam_phone" value="phone" name="spam" />
  29. Spam via Phone
  30. </label>
  31. <label for="spam_mail">
  32. <input type="checkbox" id="spam_mail" value="mail" name="spam" />
  33. Spam via Mail
  34. </label>
  35. <label for="spam" class="error">请至少选择两个选项</label>
  36. </p>
  37. </fieldset>
  38. </form>

比正常的表单多出来的一项就是validate,这个在之前的js里已经设置过了,这里面就定义了该表单项的验证信息,如是否是必填,最短长度,是否为email等等。

这句话看起来比较有意思

  1. <label for="spam" class="error">请至少选择两个选项</label>

当class的值为error时,默认是被隐藏的,只有当提交表单进行验证并出错时才会显示,同时这个for也是必不可少的,for的内容对应的是要监视的表单项。

其实最终促成我写这篇文章的原因是,从官方下载的插件在ie6下无效,经过近3个小时的追查,终于发现在jquery.validate.js里,url验证那块有乱码,结果直接导致ie6不能运行(在FF和IE7下正常)。于是我修改了一下,终于可以通过IE6了。


你可能感兴趣的:(Jquery form Validation)