vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）

本文转载自：vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）_vue中动态添加校验手机号长度_新林。的博客-CSDN博客

自定义校验（正则校验手机号码、数字、url、中文）

提供几个用正则表达式做的自定义校验规则demo书写的另一种方式 如下：

data() {
    return {
      //在rules属性填写相关字段的校验规则
      rules: {
        username: [
            { required: true, message: "必填" },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],
        //自定义校验
        name:[
            { required: true, message: '姓名不能为空', trigger: 'blur' },
            //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
            {
                pattern: /^[\u4e00-\u9fa5]{0,}$/,
                message: "只能是中文",
                trigger: "blur",
            },
        ],
        phone:[
               { required: true, message: '请输入手机号码', trigger: 'blur' },
                //校验手机号的正则：/^1[3456789]\d{9}$/
               {
                    pattern:/^1[3456789]\d{9}$/,
                    message: "请输入正确的手机号",
                    trigger: "blur",
               },
        ],
        age:[
               //校验数字:/^[0-9]*$/
               {
                    pattern: /^[0-9]*$/,
                    message: "只能包含数字",
                    trigger: "blur",
               },
        ],
        url:[
            //校验URL ：/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/
            {
                    pattern: /^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/,
                    message: "请输入正确的URL",
                    trigger: "blur",
            },
        ],
      }
   }
}