拆分校验用户名的方法
This commit is contained in:
parent
aa82a9d8ac
commit
ad539e91ed
@ -18,3 +18,10 @@ export function validUsername(str) {
|
||||
const valid_map = ['admin', 'editor']
|
||||
return valid_map.indexOf(str.trim()) >= 0
|
||||
}
|
||||
|
||||
// valid 有效的
|
||||
// 校验通过返回true
|
||||
export function validMobile(str) {
|
||||
const pattern = /^1[3-9]\d{9}$/
|
||||
return pattern.test(str)
|
||||
}
|
||||
|
@ -56,16 +56,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validUsername } from '@/utils/validate'
|
||||
import { validMobile } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
callback(new Error('Please enter the correct user name'))
|
||||
} else {
|
||||
// 可以自定义校验函数, 每个校验函数都能收到三个参数
|
||||
// 1. 规则对象
|
||||
// 2. 当前输入值
|
||||
// 3. 放行的回调函数
|
||||
// 校验过后有两种可能,
|
||||
// 1. 成功 直接调用 callback()
|
||||
// 2. 失败 创建一个错误对象(js 内置对象) new Error(提示语) 传入 callback
|
||||
if (validMobile(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error('请输入合法手机号'))
|
||||
}
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
@ -81,7 +88,12 @@ export default {
|
||||
password: '123456'
|
||||
},
|
||||
loginRules: {
|
||||
mobile: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
mobile: [
|
||||
// { required: true, trigger: 'blur', validator: validateUsername }
|
||||
// 通过函数的形式进行自定义校验
|
||||
{ required: true, trigger: 'blur', message: '手机号不能为空' },
|
||||
{ validator: validateUsername, trigger: 'blur' }
|
||||
],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
||||
},
|
||||
loading: false,
|
||||
|
Loading…
Reference in New Issue
Block a user