vue项目实战系列十五：vue-validator

1. vue-validator:

1.1 npm安装:

npm install vue-validator

1.2 入口文件main.js引入:

import Validator from 'vue-validator';
Vue.use(Validator);

1.3 vue文件:

<el-form ref="rulesForm" :rules="formRules" :model="formData" label-width="200px">
	<el-form-item label="用户名:" prop="userName">  // prop是写在item上面 
		<el-input v-model="formData.userName" style="width:300px" maxlength="50"/>
	</el-form-item>
	<el-form-item>
		<el-button type="primary" @click="onSubmit">保存</el-button>
		<el-button type="primary" @click="reset">重置</el-button>
	</el-form-item>
</el-form>

<script>
// 两个地方可以写,还可以写在data中
// (rule, value, callback) => {}为固定格式
const validatorIdNumber = function (rule, value, callback) {
	const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
	if (!value) {
		return callback(new Error ('请输入身份证号'))
	} else if (reg.test(value)) {
		callback()
	} else {
		return callback(new Error('身份证号格式不正确'))
	}
}
export default{
	data() {
		const validatorPhoneNumber = function (rule, value, callback) {
			const reg = /^[1][3,4,5,7,8][0-9]{9}$/
			if (!value) {
				return callback(new Error('请输入手机号'))
			} else if (reg.test(value)) {
				callback()
			} else {
				return callback(new Error('手机号格式不正确'))
			}
		}
		return {
			formData: {
				userName:'',
				idNumber: ''
			},
			formRules: {
				// 验证规则中userName就是表单中传入的prop
				// required为是否必填
				// message为失去焦点后的提示内容
				// trigger为触发验证的事件类型:还可以写成"blur,change"
				// validator为验证表单的方法
				userName:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
				idNumber:[{ required: true, trigger: 'blur', validator: validatorIdNumber }],
			}
		}
	},
	methods:{
		onSubmit () {
			// this.$refs[]获取标识符提交表单验证
			this.$refs['rulesForm'].validate(valid => {
				if (valid) {
				}
			})
		},
		reset (){
			// 重置表单
			this.$refs['rulesForm'].resetFields()
		}
	}
}
</script>

注:

①. ref是被引用时的标识,在验证表单的时候传入
②. rules是验证规则
③. prop是对应rules中的规则,在使用validate、resetFields方法的情况下,该属性是必填的.