饿了吗表单组件
1 基本使用
在
Element-UI
官网找例子然后在此基础上修改
2 表单校验
校验必要性
在向后端发请求调用接口之前,我们需要对所要传递的参数进行验证,来把用户的错误扼杀在摇篮之中。
校验内容
- 内容不能为空
- 密码长度必须多少位
- 手机号的格式要合规
- 邮箱的格式要合规
- ....
定义规则
- 步骤1 定义表单验证规则
data() {
return {
rules: {
// 字段名1:表示要验证的属性
// 值: 表示验证规则列表。它是一个数组,数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 },
{ 验证规则2 },
],
字段名2: [
{ 验证规则1 },
{ 验证规则2 },
],
}
}
}
复制代码
export default {
data () {
return {
rules: {
phone: [
// trigger 校验时机:失去焦点
{ required: true, message: '不能为空', trigger: 'blur' },
{ pattern: /^1[0-9]{10}$/, message: '请输入合法的手机号', trigger: 'blur' },
],
password: [
{ required: true, message: '不能为空', trigger: 'blur' },
{ pattern: /^[0-9]{6,8}$/, message: '请输入正确的密码', trigger: 'blur' }
]
}
}
}
}
复制代码
- 步骤2 模板中的配置
当这一步完成后,可以验收效果,当用户输入不符合则会提示,正确则不提示
- 步骤3 手动兜底验证
注意:这三个属性名必须一致
element-ui的表单组件.validate(valid => {
if(valid) {
// 通过了验证
} else {
// 验证失败
}
})
复制代码
validate
方法时表单组件自带的,用来对表单内容进行检验
export default {
...
methods: {
doLogin () {
alert('do login...')
},
onSubmit () {
// 提交数据 手动兜底校验
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过
this.doLogin()
} else {
alert('有错误')
}
})
}
}
}
复制代码
总结使用流程
1.定义校验规则
2.配置模板
3.手动兜底验证
3 自定义检验规则
格式
rules:{
属性名1: [
{
// 注意参数顺序
validator: function (rule, value, callback) {
// rule:采用的规则
// value: 被校验的值
// callback是回调函数,
// 如果通过了规则检验,就直接调用callback()
// 如果没有通过规则检验,就调用callback(错误对象,在错误对象中说明原因)
// 例如:callback(new Error('错误说明'))
},
trigger: 'blur'
}]
}
复制代码
举例:密码不能是123456
{validator:(rule,value,callback)=>{
console.log(rule,value,callback);
if(value==='123456'){
callback(new Error('密码太简单'))
}else{
callback()
}
},trigger:'blur'}
复制代码
如果其中一个不调用的话兜底验证就通过不了
4 重置表单清理校验痕迹
格式
this.$refs.form组件的引用.resetFields()
复制代码
作用
1.清理校验痕迹
2.回复表单默认数据