From 2088fc58f63e6d72e48ae3fd5da5fa27d12bc0a5 Mon Sep 17 00:00:00 2001 From: luohairen <3399054449@qq.com> Date: 星期五, 01 十一月 2024 13:59:30 +0800 Subject: [PATCH] 优化手机号、座机号验证 --- src/views/user/student/edit.vue | 71 +++++++++++++++++++++++++---------- 1 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/views/user/student/edit.vue b/src/views/user/student/edit.vue index 5ed5f1b..fe78374 100644 --- a/src/views/user/student/edit.vue +++ b/src/views/user/student/edit.vue @@ -2,14 +2,17 @@ <div class="app-container"> <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules"> - <el-form-item label="鐢ㄦ埛鍚嶏細" prop="userName" required> - <el-input v-model="form.userName"></el-input> - </el-form-item> - <el-form-item label="瀵嗙爜锛�" required> - <el-input v-model="form.password"></el-input> - </el-form-item> - <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName" required> + <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName"> <el-input v-model="form.realName"></el-input> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜锛�" prop="phone"> + <el-input v-model="form.phone"></el-input> + </el-form-item> + <el-form-item label="鐧诲綍璐﹀彿锛�" prop="userName"> + <el-input v-model="form.userName" autocomplete="off"></el-input> + </el-form-item> + <el-form-item v-if="!form.id" label="鐧诲綍瀵嗙爜锛�" prop="password"> + <el-input v-model="form.password" show-password autocomplete="off"></el-input> </el-form-item> <el-form-item label="骞撮緞锛�"> <el-input v-model="form.age"></el-input> @@ -20,17 +23,14 @@ </el-select> </el-form-item> <el-form-item label="鍑虹敓鏃ユ湡锛�"> - <el-date-picker v-model="form.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="閫夋嫨鏃ユ湡" /> + <el-date-picker v-model="form.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="閫夋嫨鏃ユ湡"/> </el-form-item> - <el-form-item label="鎵嬫満锛�"> - <el-input v-model="form.phone"></el-input> - </el-form-item> - <el-form-item label="骞寸骇锛�" prop="userLevel" required> - <el-select v-model="form.userLevel" placeholder="骞寸骇"> - <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option> - </el-select> - </el-form-item> - <el-form-item label="鐘舵�侊細" required> + <!-- <el-form-item label="骞寸骇锛�" prop="userLevel">--> + <!-- <el-select v-model="form.userLevel" placeholder="骞寸骇">--> + <!-- <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>--> + <!-- </el-select>--> + <!-- </el-form-item>--> + <el-form-item label="鐘舵�侊細"> <el-select v-model="form.status" placeholder="鐘舵��"> <el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option> </el-select> @@ -49,6 +49,34 @@ export default { data () { + var validatePassword = (rule, value, callback) => { + if (value === '') { + callback(new Error('璇疯緭鍏ョ櫥褰曞瘑鐮�')) + } else if (!/[A-Z]/.test(value)) { + callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓ぇ鍐欏瓧姣�')) + } else if (!/[a-z]/.test(value)) { + callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓皬鍐欏瓧姣�')) + } else if (!/[0-9]/.test(value)) { + callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓暟瀛�')) + } else { + callback() + } + } + var validatePhone = (rule, value, callback) => { + // 鎵嬫満鍙峰拰搴ф満鍙烽獙璇侀�昏緫 + const phoneRegex = /^1[3-9]\d{9}$/; // 鎵嬫満鍙锋牸寮� + const landlineRegex = /^\d{3,4}-?\d{7,8}$/; // 搴ф満鍙锋牸寮忥紝鍙互鍖呭惈鍖哄彿鍜屽彲閫夌殑杩炲瓧绗� + + if (!value) { + callback(new Error('璇疯緭鍏ユ墜鏈哄彿鎴栧骇鏈哄彿')); + } else if (!phoneRegex.test(value)) { + if (!landlineRegex.test(value)){ + callback(new Error('鎵嬫満鍙锋垨搴ф満鍙锋牸寮忎笉姝g‘')); + } + } else { + callback(); + } + } return { form: { id: null, @@ -66,13 +94,16 @@ formLoading: false, rules: { userName: [ - { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' } + { required: true, message: '璇疯緭鍏ョ櫥褰曡处鍙�', trigger: 'blur' } ], realName: [ { required: true, message: '璇疯緭鍏ョ湡瀹炲鍚�', trigger: 'blur' } ], - userLevel: [ - { required: true, message: '璇烽�夋嫨骞寸骇', trigger: 'change' } + password: [ + { validator: validatePassword, trigger: 'blur' } + ], + phone: [ + { validator: validatePhone, trigger: 'blur' } ] } } -- Gitblit v1.8.0