Vue使用el-form校验用户输入数据格式-demo

          
            
              
            
            
              
            
            
              

                

                  点击注册即表示同意服务协议和隐私条款
                
                
注册
                
已有账户？去登录

              
            
          
        

import { ref, reactive } from 'vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
  email: '',
  pwd: '',
  idkey: ''
});
const validatePwd = (rule, value, callback) => {
  if (!value) {
  服务器托管网  callback(new Error('请输入密码'));
  }
  callback();
};
const rulesForm = reactive({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱输入格式错误', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' },
    {
      pattern:
        /^(?=.*[A-Z])(?=.*d)(?=.*[~`!@#$%^&*()_-+={}0|;;.?/])[A-Za-zd~`!@#$%^&*()_-+={}0|;;.?服务器托管网/]*$/,
      message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',
      trigger: 'blur'
    }
//自定义校验规则
    // {required: true, message: '请输入密码', trigger: 'blur',validator: validatePwd}
  ]
});