jquery.validate验证text,checkbox,radio,selected

jquery.validate是jquery的一个插件，用来辅助开发者在客户端方便快捷的实现表单验证，最终达到提高用户体验的目的。

官网：

http://plugins.jquery.com/validate/

示例代码

index.cshtml

  

    Username:
    
  
  

    password:
    
  
  

    password1:
    
  
  

    sex:
    
      请选择
      男
      女
    
  
  

    level:
    sport
    write
  
  

    level:
    1
    2
  
  

    
  

@section scripts{

}

jquery.validate在定位html标签的时候，默认使用name属性来获取标签，所以需要开发者给需要进行验证的标签都加上name属性，并且赋值。

index.js

$().ready(function () {
  $("#formLogin").validate({
    rules: {
      username: {
        required: true
      },
      password: {
        required: true
      },
      sex: {
        required: true
      },
      level: {
        required: true
      },
      favorite: {
        required: true
      }
    },
    messages: {
      username: {
        required: "please input username"
      },
      password: {
        required: "please input password"
      },
      sex: {
        required: "please select sex"
      },
      level: {
        required: "level requred"
      },
      favorite: {
        required: "favorite required"
      }
    },
    errorPlacement: function (error, element) { //指定错误信息位置
      if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
       var eid = element.attr('name'); //获取元素的name属性
       error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
     } else {
       error.insertAfter(element);
     }
   }
 });
});
$("#submit").click(function () {
  $("#submit").submit();
});

有时候我们需要使用正则表达式对一些输入进行验证，比如说邮箱，电话号码，或者是用户名必须字母开头并且长度要在5-30位，等等之类的。

jquery.validate默认没有提供正则表达式的验证，但是它提供了一个扩展，我们可以自己添加关于正则表达式的验证规则。

$(function () {
    // 判断用户输入的value是否满足传入的正则params的规范
    jQuery.validator.addMethod("pattern", function (value, element, params) {
                                                                                                                            
        if (!params.test(value)) {
            return false;
        }
        return true;
    });
});

这样我们就可以像下面这样使用我们自定义的正则表达式验证了。

$().ready(function () {
    $("#formLogin").validate({
        rules: {
                                                                                                                    
            tel: {
                required:true,
                pattern: /^[0-9]+$/
            }
        },
        messages: {
                                                                                                                    
            tel: {
                required:'tel required',
                pattern: "regex error"
            }
        }
                                                                                                                
    });
});

怎么样，是不是很酷啊！

$("#formSupplier").validate还有一些其他的参数，跟多的参数可以查看

http://blog.csdn.net/a497785609/article/details/5758613

在这里先介绍两个比较常用的。

errorElement

错误提示的html标签

submitHandler

验证成功之后的操作

$("#formSupplier").validate({
        errorElement: "span",
          
        submitHandler: function (form) {
            if (btnType == 1) {
                  
                submitUpdateSupplier();
            } else {
                offShelf();
            }
        },
        rules: {
            txtSuUserName: {
                required: true,
                pattern: regexUsername
            }
        }，
        messages: {
            txtSuUserName: {
                required: "请填写编号！",
                pattern: "请注意，编号只能使用3-15位的字母组合！"
            }
        }
});