用户名验证规则

src/views/login/login.vue

@@ -140,15 +140,48 @@ getHospitalsData().then((res: any) => {
 })
 const phoneAreas: any = getPhoneAreasData()
 
+
+
+//自定义校验规则函数
+const validatorUserName = (rule: any, value: any, callback: any) => {
+  //rule:即为校验规则对象
+  //value:即为表单元素文本内容
+  //函数:如果符合条件callBack放行通过即为
+  //如果不符合条件callBack方法,注入错误提示信息
+  if (value.length >= 4) {
+    callback();
+  } else {
+    callback(new Error('账号长度至少五位'));
+  }
+}
+
+const validatorPassword = (rule: any, value: any, callback: any) => {
+  if (value.length >= 6) {
+    callback();
+  } else {
+    callback(new Error('密码长度至少六位'));
+  }
+}
+
+const validatorPhone = (rule: any, value: any, callback: any) => {
+  if (value.length == 11) {
+    callback();
+  } else {
+    callback(new Error('手机号码长度为11位'));
+  }
+}
+
+
+
 const loginRules = reactive({
     account: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { required: true, validator: validatorUserName, trigger: 'change' },
     ],
     password: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
+        { required: true, validator: validatorPassword, trigger: 'change' },
     ],
     phone: [
-        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { required: true, validator:validatorPhone, trigger: 'change' },
     ],
     code: [
         { required: true, message: '请输入验证码', trigger: 'blur' },
@@ -156,16 +189,16 @@ const loginRules = reactive({
 })
 const registerRules = reactive({
     account: [
-        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { required: true, validator: validatorUserName, trigger: 'change' },
     ],
     password: [
-        { required: true, message: '请输入密码', trigger: 'blur' },
+        { required: true, validator: validatorUserName, trigger: 'change' },
     ],
     name: [
         { required: true, message: '请输入用户名', trigger: 'blur' },
     ],
     phone: [
-        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { required: true, validator:validatorPhone, trigger: 'change' },
     ],
     hospital: [
         { required: true, message: '请选择医院', trigger: 'blur' },