jQuery.Validate自定义规程的使用案例

时间：2023-11-28 23:00:56
  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>jquery.validate自定义规则的使用方法</title>
  6. <script src="jquery.js" type="text/javascript"></script>
  7. <script src="jquery.validate.min.js" type="text/javascript"></script>
  8. <script type="text/javascript" language="javascript">
  9. //规则名：buga,value检测对像的值
  10. $.validator.addMethod("buga", function(value) {
  11. return value == "buga";
  12. }, 'Please enter "buga"!');
  13. //规则名：chinese，value检测对像的值，element检测的对像
  14. $.validator.addMethod("chinese", function(value, element) {
  15. var chinese = /^[\u4e00-\u9fa5]+$/;
  16. return (chinese.test(value)) || this.optional(element);
  17. }, "只能输入中文");
  18. //规则名：byteRangeLength，value检测对像的值，element检测的对像,param参数
  19. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  20. var length = value.length;
  21. for (var i = 0; i < value.length; i++) {
  22. if (value.charCodeAt(i) > 127) {
  23. length++;
  24. }
  25. }
  26. return this.optional(element) || (length >= param[0] && length <= param[1]);
  27. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
  28. $(function(){
  29. $("#form1").validate({
  30. rules: {
  31. username:{
  32. required:true,
  33. chinese:true,
  34. byteRangeLength:[1,2]
  35. }
  36. //username:"buga"
  37. //username:"chinese"
  38. //username:"byteRangeLength"
  39. }
  40. });
  41. });
  42. </script>
  43. </head>
  44. <body>
  45. <form id="form1" name="form1" method="post" action="">
  46. <p>
  47. <label for="username">用户名：</label>
  48. <input type="text" name="username" id="username"/>
  49. </p>
  50. <p>
  51. <input type="submit" name="button" id="button" value="提交" />
  52. </p>
  53. </form>
  54. </body>
  55. </html>

相关文章