forgetPwd.vue页面
- 在template中使用iview Form组件
<template>
<Form ref="forgetPwdForm" :label-width="100" :model="forgetPwdForm" :rules="vailRules" @submit.native.prevent="submit">
<FormItem prop="mobile">
<Input v-model="forgetPwdForm.mobile" placeholder="请输入手机号"></Input>
</FormItem>
<FormItem prop="password">
<Input v-model="forgetPwdForm.password" placeholder="请输入密码"></Input>
</FormItem>
<FormItem prop="confirmPwd">
<Input v-model="forgetPwdForm.confirmPwd" placeholder="请确认密码"></Input>
</FormItem>
<Button type="primary" @click.native="submit">确认</Button>
</Form>
</template>
复制代码
- 定义变量
import iviewRules from './../libs/iviewRules.js'
export default {
data () {
/* 两个forgetPwdForm值对比的需要写在该位置 否则会报错 */
const valiConfirmPwd = (rule, value, callback) => {
if (value !== this.forgetPwdForm.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
}
return {
forgetPwdForm: {
mobile: '',
password: '',
confirmPwd: ''
},
vailRules: [
mobile: [
{required: true, message: '请输入手机号码', trigger: 'blur'},
{validator: iviewRules.isPhone, message: '请输入正确的手机号码', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码至少为6位字符', trigger: 'blur'},
{type: 'string', min: 20, message: '密码至多为20位字符', trigger: 'blur'},
],
confirmPwd: [
{required: true, message: '请确认密码', trigger: 'blur'},
{validator: valiConfirmPwd, message: '两次输入的密码不一致', trigger: 'blur'}
]
]
}
},
methods: {
submit () {
this.$refs.forgetPwdForm.validate((valid) => {
/* valid的值为true/false 如果全部验证了定义的规则 则valid为true 否则为false 使用此方法 无需二次验证 方便快捷*/
if (valid) {
/* 验证之后需要做的事情 */
}
})
}
}
}
复制代码
- vailFormate.js页面
function Rules () {}
Rules.prototype.isPhone = function (value) {
let reg = /^1[3|4|5|7|8]\d{9}/
return reg.test(value)
}
export default new Rules()
复制代码
- iviewRules.js页面
import rules from './../libs/vailFormate.js'
let iviewRules = {}
iviewRules.isPhone = (rule, value, callback) => {
if (rules.isPhone(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'));
}
}
export default iviewRules
复制代码