vue 结合elment-ui做一些表单验证

validate.js

//验证手机号码

export function isvalidPhone(str) { //方法封装

  const reg = /^1[3-9][0-9]{9}$/;

  return reg.test(str)

}

......

调用

import {isvalidPhone} from '../../../../common/js/validate.js' 
data(){

            var mobile=(rule,value,callback)=>{ //validator: mobile 对应的方法

                if(!isvalidPhone(value)){

                    callback(new Error('手机号格式有误'))

                }else{

                    callback()

                }

            }

            return{

                bindMobileForm:{

                    mobile:'',

                    code:''

                },

                 Rules:{

                    "mobile":[

                        { required:true,message:"手机号不能为空",trigger:"blur"},

                        { required: true, trigger:'blur',validator: mobile}

                    ],

                    "code":[

                        { required:true,message:"验证码不能为空",trigger:"blur"},

                    ]

                }

            }

        }

<el-form :model="bindMobileForm" ref="bindMobileForm" :rules="Rules" key="code"> </el-form>

this.$refs[bindMobileForm].validate((valid) => {

       if (valid) {

                    //表单验证通过

                    } 

  });