表单

验证规则　

<template>　　
　　 <el-form size="large" label-width="25%"  ref="FormData" :rules="FormDataRules" :model="FormData"> 
       <el-form-item label="登录名" prop="Logoname"> 
            <el-input v-model="FormData.Logoname"></el-input>
       </el-form-item>   
       <el-form-item label="电话" prop="Phone"> 
            <el-input  v-model="FormData.Phone"> </el-input>
       </el-form-item>  
       <el-form-item label="邮箱" prop="Email"> 
            <el-input   v-model="FormData.Email"> </el-input>
       </el-form-item>       
       <el-form-item >
            <el-button type="primary"  @click.prevent="ButtonAdd()">确定</el-button> 
            <el-button type="primary"  @click.prevent="ButtonCancel()">取消</el-button> 
       </el-form-item>
    </el-form>
</template>
export default {
　　data() {
　　　　//验证手机号
　　　　var RulePhone = (rule, value, callback) => {
　　　　　　var reg= /^1[3|4|5|7|8][0-9]{9}$/;
　　　　　　if (String(value).length<11) {
　　　　　　　　callback(new Error('电话号码为11位数！')); 
　　　　　　} else if (value!=parseFloat(value)) {
　　　　　　　　callback(new Error('联系方式只能是数字'));
　　　　　　}else if(!reg.test(value)){
　　　　　　　　callback(new Error('请输入正确的电话号码'));
　　　　　　}else{
　　　　　　　　callback();
　　　　　　}
　　　　}; 
　　　　//验证邮箱
　　　　var RuleEmail = (rule, value, callback) => {
　　　　　　const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
　　　　　　if (!value) {
　　　　　　　　callback(new Error("邮箱不能为空"))
　　　　　　}else if (!mailReg.test(value)) {
　　　　　　　　callback(new Error("请输入正确的邮箱格式"))
　　　　　　} else {
　　　　　　　　callback()
 　　　 　　} 
　　　　};
　　　　return {
　　　　　　FormData: { 
　　　　　　　　Logoname: '',       //登录名
　　　　　　　　Phone: '',             //电话
　　　　　　　　Email:'',               //邮箱
　　　　　　}, 
　　　　　　FormDataRules:{
　　　　　　　　Logoname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],   //登录名
　　　　　　　　Phone: [{required: true, type:'number', validator:RulePhone, trigger: 'blur' } ]     //电话
　　　　　　　　Email:[{validator:RuleEmail,trigger:'blur'}]  //邮箱
　　　　　　}
　　　　}
　　},
　　methods: {
　　　　//确定按钮
　　　　ButtonAdd(){
　　　　　　this.$refs.FormData.validate((valid) => {
　　　　　　　　if(valid){
　　　　　　　　　　if(this.FormData.Pwd!=this.FormData.AgainPwd){
　　　　　　　　　　　　this.$message("两次密码输入不一致，请重新输入");
　　　　　　　　　　}
　　　　　　　　} 
　　　　　　})
　　　　}
　　}
}

 

转载于:https://www.cnblogs.com/miaoyiyan/p/9591276.html