对form表单进行校验

var userFormValidator;
jQuery.validator.addMethod("isPhone", function(value, element) {
    var length = value.length;
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "请填写正确的手机号码:11位数字");

jQuery.validator.addMethod("isName", function(value, element) {
    var phoneName = /^[\u4e00-\u9fa5]{2,10}$/;
    return this.optional(element) || ( phoneName.test(value));
}, "请正确填写人员姓名,2-10个汉字");

userFormValidator = $("#user_form").validate({
    // 定义校验规则
    rules: {
        name: {
            required: true,
            isName: true
        },
        phoneNumber: {
            isPhone:true
        }
    },
    messages: {
        name: {
            required: "请填写人员姓名"
        },
        phoneNumber: {
            required: "请填写手机号码"
        }
    },
    // 提交表单
    submitHandler: function (form) {
        //var params = new FormData(document.getElementById("user_form"));
        var params = $(form).serialize();
        // 异步保存
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: getRootPath() + "/map/manage/savePerson",
            data: params,
            success: function (result) {
                if (result.resultStat == "SUCCESS") {
                    //var mylay = parent.layer.getFrameIndex("userFormLayer");
                    // parent.layer.close(mylay);
                    layer.msg('保存成功!', {
                        time: 2000 //20s后自动关闭
                    });
                    closeLayer(true);
                } else {
                    layer.alert("保存失败");
                }
            },
            error: function (result) {
                layer.alert("保存失败," + result.mess);
            }
        });
    }
});
iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。 iview form表单提供了两种方法来移除校验规则,分别是通过表单ref属性和通过字段的prop属性。 通过表单ref属性移除校验规则,需要先获取表单对象,然后调用$refs.formName.removeRule()方法。其中,formName为表单的ref属性值,removeRule()方法中传入的参数为需要移除校验规则的字段的prop属性值。 实例如下: ```html <template> <Form :model="form" :rules="rules" ref="form"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.$refs.form.removeRule('phone'); } } } </script> ``` 通过字段的prop属性移除校验规则,只需要在校验规则中将该字段的校验规则设置为一个空数组即可。 实例如下: ```html <template> <Form :model="form" :rules="rules"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.rules.phone = []; } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值