代码改变世界

vue+element-ui中的表单验证(电话等等)

2017-11-30 17:41  WEB前端小菜鸟  阅读(42069)  评论(1编辑  收藏  举报

1.

2.

3.

 

============================================================上代码=============================

===>本页面的vue源码:

<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model.number="ruleForm.phone" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>

</div>

</template>
<script>
//这里要俺需要引入,我不是一个对象
import {isvalidPhone} from '../../../config/validate'
//定义一个全局的变量,谁用谁知道
var validPhone=(rule, value,callback)=>{
if (!value){
callback(new Error('请输入电话号码'))
}else if (!isvalidPhone(value)){
callback(new Error('请输入正确的11位手机号码'))
}else {
callback()
}
}

export default {
data() {
return {
ruleForm: {
name: '',
phone:''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],

phone: [
{ required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');//这里就是符合规则,然后去调对应的接口
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}

</script>
========================================================================================================================

validate.js文件的源码:

// 手机号验证
export function isvalidPhone(str) {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
return reg.test(str)
}
====其他的验证就自己写了=====

重点就是自己写规则,然后引入,element的自己验证有的不全,就像电话号码一样