Vue Element表单绑定（二）表单验证1

一、数字类型验证 type=number

<template>
<div>
<h3>数字类型验证</h3>
<el-form :inline="true" :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="年龄"
prop="age"
:rules="[
{required:true,message:'年龄不能为空'},
{type:'number',message:'年龄必须为数字'}
]"
>
<el-input type="age" v-model.number="numForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

export default {
data() {
return {
numForm: {}
    };
  },
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit1");
        } else {
return false;
        }
      });
    },
//重置操作
resetForm(formName) {
this.$refs[formName].resetFields();
    }
  }
};

二、邮箱类型验证 type=emial

<template>
<div>
<h3>邮箱验证</h3>
<el-form :inline="true" :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="邮箱"
prop="email"
:rules="[
{required:true,message:'邮箱不能为空'},
{type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
]"
>
<el-input type="email" v-model="numForm.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

三、url类型验证,type=url

<template>
<div>
<h3>Url验证</h3>
<el-form :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="链接地址"
prop="url"
:rules="[
{required:true,message:'链接不能为空'},
{type:'url',message:'请输入正确的链接',trigger:'blur'}
]"
>
<el-input type="url" v-model="numForm.url"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

四、字符长度类型,min,max

<template>
<div>
<h3>字符长度类型</h3>
<el-form :model="numForm" ref="numForm" class="demo-ruleForm">
<el-form-item
label="标题"
prop="title"
:rules="[
{required:true,message:'标题不能为空'},
{min:3,max:10,message:'字符长度3-10之间',trigger:'blur'}
]"
>
<el-input type="title" v-model="numForm.title"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

五、手机号类型,使用自定义规则 ：rules

<template>
<div>
<h3>手机号类型</h3>
<el-form :model="numForm" :rules='rules' ref="numForm" class="demo-ruleForm">
<el-form-item label="手机号" prop="mobile">
<el-input type="mobile" v-model="numForm.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numForm')">提交</el-button>
<el-button @click="resetForm('numForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

js定义验证规则

//定义一个全局的变量，谁用谁知道
var validPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
callback(new Error("请输入正确的11位手机号码"));
  } else {
callback();
  }
};
// 手机号验证
function isvalidPhone(str) {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
return reg.test(str);
}

export default {
data() {
return {
numForm: {
mobile:''
      },
rules: {
mobile: [
          {
required:true,
trigger: "blur",
validator: validPhone
          }
        ]
      }
    };
  },
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert(JSON.stringify(this.numForm));
        } else {
return false;
        }
      });
    },
//重置操作
resetForm(formName) {
this.$refs[formName].resetFields();
    }
  }
};