校验

src/views/finance/receipt/user.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-page-header :content="isEdit?'编辑收款用户':'添加收款用户'" @back="goBack" />
     <el-card class="form-container" shadow="never">
-      <el-form ref="receiptUserFrom" :model="receiptUser" label-width="150px">
+      <el-form ref="receiptUserFrom" :rules="formRules" :model="receiptUser" label-width="150px">
         <el-form-item label="收款用户名称：" prop="name">
           <el-input v-model="receiptUser.name" maxlength="100" />
         </el-form-item>
@@ -52,7 +52,28 @@ const defaultUser = {
 export default {
   name: 'ReceiptUserEdit',
   data() {
+    const checkPhone = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('用户手机号不能为空'))
+      } else {
+        const reg = /^1[3456789]\d{9}$/
+        console.log(reg.test(value))
+        if (reg.test(value)) {
+          callback()
+        } else {
+          return callback(new Error('请输入正确的手机号'))
+        }
+      }
+    }
     return {
+      formRules: {
+        name: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+        mobile: { validator: checkPhone, trigger: 'blur' },
+        password: [
+          { required: true, message: '请输入用户密码', trigger: 'blur' },
+          { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
+        ]
+      },
       receiptUser: Object.assign({}, defaultUser),
       isEdit: false,
       passwordFlag: true,