element-ui表单验证(即拿即用)

原创
无纤尘

一、表单el-form上加rules

    <el-form ref="form" :model="form" label-width="120px" :rules="rule">
        <el-form-item label="用户姓名" prop="name" >
            <el-input v-model="form.name" placeholder="请输入用户姓名"  clearable/>
        </el-form-item>
        <el-form-item label="身份证号码" prop="IdCard">
            <el-input v-model="form.IdCard" placeholder="请输入身份证号码"  clearable />
        </el-form-item>
    </el-form>

rules: 是el-form的一个属性,作用是绑定验证器对象。
ref : 作用类似于Dom中的id方便js拿用。
prop: el-form-item 的一个字段,对应的是rules验证器内的名称,与传入form组件的model字段必须一样! 必填!

export default {
        data() {
            
            return {
                form: {
                    name: '',
                    IdCard: '',
                },
                rule: {
                    name:[
                        {required:true,message:'请输入姓名',trigger:'blur'},
                        {min: 2, max: 6, message:'长度在2到6个字符',trigger:'blur'},
                        {
                            required: true,
                            // pattern: /^[\u4e00-\u9fa5a-z]+$/gi, //只能输入汉字和英文字母
                            pattern: /^[\u4e00-\u9fa5a-z]+$/gi, //只能输入汉字和英文字母
                            message: '姓名不支持特殊字符',
                            trigger: 'blur'
                        },
    
                    ],
                    IdCard:[
                        {required:true,message:'请输入身份证号',trigger:'blur'},
                        {min: 15, max: 18, message:'请如实填写18位号码',trigger:'blur'},
                        {
                            required: true,
                            pattern: /([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])/  ,
                            message: '请输入正确身份证号码',
                            trigger: 'blur'
                        },
                    ],
                }
            }
        },
    }

对于有些需要自定义的效验规则,可以作为变量写在data中

<el-form ref="form" :model="form" label-width="120px" >
    <el-form-item label="密码" prop="password" >
        <el-input v-model="form.password" placeholder="请输入密码"  clearable/>
    </el-form-item>
    <el-form-item label="确认密码" prop="comPassword" >
        <el-input v-model="form.comPassword" placeholder="请输入用户姓名"  clearable/>
    </el-form-item>
</el-form>
export default {
        data() {
            let reg = /(?!^(\d+|[a-zA-z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
            var validatePwd = (rule,value,callback) =>{
                if (!reg.test(value)) {
                    callback(new Error('密码是6-12位数字、字母或字符!'))
                }else{
                    callback()
                }
            }
            var validateComPwd = (rule,value,callback) =>{
                if (this.form.password !== value) {
                    callback(new Error('确认密码与密码不一致'))
                }else{
                    callback()
                }
            }
            return {
                form: {
                    password:'',
                    comPassword:'',
                },
                rule: {
                    password:[
                        {required:true,message:'请输入密码',trigger:'blur'},
                        {validator:validatePwd,trigger:'blur'},    
                    ],
                    comPassword:[
                        {required:true,message:'请输入确认密码',trigger:'blur'},
                        {validator:validateComPwd,trigger:'blur'},
                    ]
                }
            }
        },
        
    }

二、在el-form-item上加rules

<el-form ref="form" :model="form" label-width="120px" >
    <el-form-item label="联系方式" prop="phoneNum"     :rules="[{required:true,message:'请输入电话号码',trigger:'blur'},{required: true,pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message: '请输入正确的电话号码',trigger: 'blur'}]">
                <el-input v-model="form.phoneNum" placeholder="请输入用户电话号码"  clearable/>
    </el-form-item>
</el-form>

这种方法适用于个别需要验证的字段,或者表单字段又变动的效验。

三、验证规则

是否必须填: required:true|| fasle
根据正则表达式验证: pattern
最大长度和最小长度: min和max
数据转换:transform(value){return}
自定义校验功能:validador:fn(rule, value, callback)
监测文本框焦点:trigger

trigger类型为blur的功能是文本框失去焦点才会触发
trigger类型为change的功能是文本框在输入内容时触发
trigger类型也可以同时使用blur和change,功能结合上面两个的功能

自带验证类型: type

string:必须是类型string。
number:必须是类型number。
boolean:必须是类型boolean。
method:必须是类型function。
regexp:必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
integer:必须是类型number和整数。
float:必须是类型number和浮点数。
array:必须是由…确定的数组Array.isArray。
object:必须是类型object而不是Array.isArray。
enum:价值必须存在于enum。
date:值必须有效,由确定 Date
url:必须是类型url。
hex:必须是类型hex。
email:必须是类型email。

版权协议须知!

本篇文章来源于 岳岳 ,如本文章侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意

none

49 0 2022-09-13


分享:
icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif
  • 默认
  • 护眼
  • 夜晚
  • 壁纸
  • 默认