element 验证
emer 发布于 2018-11-20 16:14 2614 次阅读
<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) }