jquery validate表单验证框架及使用

hgl 1年前 ⋅ 185 阅读

学习可参考:http://www.runoob.com/jquery/jquery-plugin-validate.html

  • 引入
    <script src="../../jquery-validation/jquery.validate.min.js"></script>
    <script src="../../jquery-validation/localization/messages_zh.min.js"></script>
    <script src="../../jquery-validation/globalset.js"></script>
    <script src="../../jquery-validation/additional-methods.js"></script>
  • 验证
    $(function(){
    $("#appForm").validate({
    rules: {

    },
    messages: {

    },
    submitHandler: function (form) {
    vm.saveOrUpdate();
    }
    });
    });
  • 自定义规则
    /**
    * 手机号码校验
    */
    $.validator.addMethod("phone", function (value) {
    if(value.length <= 0) {
    return true;
    }
    var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    return reg.test(value);
    });
    /**
    * 身份证校验
    */
    $.validator.addMethod("idCard", function (value) {
    if(value.length <= 0) {
    return true;
    }
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    return reg.test(value);
    });
    $(function(){
    $("#appForm").validate({
    rules: {
    telphone: 'phone',
    idCard: 'idCard',
    email: true

    },
    messages: {
    telphone: '手机号码格式不正确',
    idCard: '身份证格式不正确',
    },
    submitHandler: function (form) {
    vm.saveOrUpdate();
    }
    });
    });

注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: