vue element 表单验证

表单验证

1、电话&手机

<FormItem label="联系人电话" prop="phone">
    <Input type="text" v-model="info.phone" auto-complete="off" placeholder="请输入联系方式"  />
</FormItem>

rules: {
    contactPhone: [
    {required: true, message: '联系人电话不能为空', trigger: 'change'},
    {pattern: /^1[345789]\d{9}$/, message: '请输入正确的手机号', trigger: 'change'}
    ],
},

2、身份证

<FormItem label="身份证号码"  prop="idCard">
    <Input placeholder="请输入身份证号码" v-model="Info.idCard"/>
</FormItem>

rules: {
    idCard : [
    {
    required: true,
    validator: (rule, value, callback) => {
        if (!value) {
            callback(new Error("身份证不能为空!"));
        } else if (
        !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
        .test(value)) {
            callback(new Error("身份证不合法!"));
        } else {
            callback();
        }
    },trigger: "change"}
    ],
    legalIdCard: [
    { required: true, trigger: "change", message:'法人身份证号不能为空' },
    { pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '身份证号码不合法', trigger: 'change'}],
},

3、储蓄卡

<Form-item label="储蓄卡号" prop="cardNo">
    <Input v-model="info.cardNo"  placeholder="请输入储蓄卡卡号"/>
</Form-item>

 rules:{
    cardNo: [
        {required: true,pattern: /^([1-9]{1})(\d{14}|\d{18})$/,
        message: '请输入正确的储蓄卡卡号',trigger: 'blur'} 
    ]
}

4、Email

<el-form-item label="Email：" prop="email">
    <el-input v-model="admin.email" placeholder="请输入Emial..."/>
</el-form-item>

rules: {
    //简洁版
    email: [{type: 'email', message: 'Email格式不正确...', trigger: 'blur'}],
    //完整版
    Email: [
        {required: true, message: '不能为空...', trigger: 'blur'}, 
        {pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, message: 'Email格式不正确...', trigger: 'blur' },
    ]
},

5、链接 link

<el-form-item label="链接：" prop="url">
    <el-input v-model="banner.url" placeholder="请输入链接..."/>
</el-form-item>

 rules :{
    advLink:[
        {required: true, message: '跳转地址不能为空...', trigger: 'blur'},
        {pattern: /(http|ftp|https):\/\/([\w.]+\/?)\S*/, message: '请输入以http/https开头的链接地址', trigger: 'blur' }   
    ], 
    url: [{
        validator: (rule, value, callback) => {
            if (value && value.indexOf('http://') !== 0 && value.indexOf('https://') !== 0) {
                callback(new Error('外链链接必须带上http://或https://'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    }],
}

6、权重 weight

<el-form-item label="权重值设置" prop="advWeight">
    <el-input-number v-model="info.advWeight" :step="1" :min="0"/>
    <el-tag type="warning" style="font-size: 16px">数值越小,权重越大，排名越靠前</el-tag>
</el-form-item>

  //方法 1
    var weights = (rule, value, callback) => {
        if (value=='undefined') {
            callback(new Error('请输入权重'));
            } else {
            if (!/^([0-9][0-9]{0,1}|100)$/.test(value)) {
                callback(new Error('权重值在0~100之间'));
            }
            callback();
        }
    };

// 方法二
 rules :{
        advWeight :[
            {required: true, message: '不能为空...', trigger: 'blur'},
            {pattern: /^\d+$/, message: '必须为整数...', trigger: 'blur'}
        ], 
        weight: [
        {required: true,type:'number', message: '不能为空...', trigger: 'blur'},
        {pattern: /^[1-9]\d{0,5}|0$/, message: '请输入6位数以内的正整数', trigger: 'blur' }
        ],
        weight6: [{validator: weights, required: true,trigger: "change" }]
    }

7、名称 name

<el-form-item label="作者" prop="author">
    <el-input v-model="formOption.author" placeholder="请输入姓名..." />
</el-form-item>

 rules :{
        author: [
            { required: true, message: '请输入作者姓名', trigger: 'blur' },
            { min: 2, max:10, message: '字符数在2到10个字符以内', trigger: 'blur' },
            {pattern: /^[\u4E00-\u9FA5A-Za-z\.]+$/, message: '请输入正确的姓名格式', trigger: 'blur' }
        ],
    }

ps：引用element ui 可以局部也可以全局，上面既有局部的也有全局引入的，要配合自己的项目做具体的调整。