Form 表单验证
表单包含 输入框
, 单选框
, 下拉选择
, 多选框
等用户输入的组件。 使用表单,您可以收集、验证和提交数据。
TIP
Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。
验证过程
示列1
<el-dialog title="新增业主" v-model="dialogVisible" width="30%">
<el-form ref="formRef" :model="form" label-width="120px" :rules="baseRules">
<el-form-item label="业主名称" prop="ownerName">
<el-input v-model="form.ownerName" style="width: 80%"/>
</el-form-item>
<el-form-item label="手机号/账号" prop="ownerPhone">
<el-input v-model="form.ownerPhone" style="width: 80%"/>
</el-form-item>
<el-form-item label="密码" prop="ownerPassword">
<el-input v-model="form.ownerPassword" style="width: 80%"/>
</el-form-item>
<el-form-item label="年龄" prop="ownerAge">
<el-input v-model="form.ownerAge" style="width: 80%" />
</el-form-item>
<el-form-item label="房屋ID" prop="ownerHouseId">
<el-input v-model="form.ownerHouseId" style="width: 80%"/>
</el-form-item>
<el-form-item label="邮箱" prop="ownerEmail">
<el-input v-model="form.ownerEmail" style="width: 80%"/>
</el-form-item>
<el-form-item label="性别" prop="ownerGender">
<el-radio-group v-model="form.ownerGender" class="ml-4">
<el-radio :label="1" size="男">男</el-radio>
<el-radio :label="2" size="女">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="出生日期" prop="ownerTime">
<el-date-picker v-model="form.ownerTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" clearable></el-date-picker>
</el-form-item>
<el-form-item label="业主头像">
<el-upload ref="upload" action="http://localhost:8080/files/upload" :on-success="filesUploadSuccess">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</el-dialog>
想要对输入框进行验证需要绑定prop名如下示列
data(){
return{
//示列1中的 rules="baseRules" 绑定表单
baseRules: {
ownerName: [
{ required:true, message:'请输入业主名称',trigger:'blur'},
{required:true,min:1,max:10, message: '长度在1到10个字符串内',trigger: 'blur'}
],
}
}
效果:
模板:name: [ { pattern: 验证条件, required: true, message: "提示信息", trigger: "blur" }]
- name:为prop名 示列中的ownerName
type:类型
- 验证数值:number
- 验证日期:date
- 验证多选:array
- 验证邮箱:email等等
- 这些虽然是自带的 但是有局限性 我推荐使用正则表达式 我下面会写详细的使用教程
- required:是否必选项(此栏是否为空)
- message:报错信息
trigger:触发方式
- blur :失去焦点时进行验证
常用:对input
输入框的验证 - change :当值发生变化时进行验证
常用:下拉框select
,日期选择框date-picker
,复选框checkbox
,单选框radio
)
- blur :失去焦点时进行验证
正则表达式验证(重点)
vue的rules中自带的校验规则个人感觉不好用推荐使用正则表达式的,那么应该如何使用呢? 步骤如下:
1、创建regex.js
在Vue项目中的utils包创建regex.js文件 用来存放正则表达式
2、使用export const命名导出 编写需要的正则表达式
export const reg_tel_命名 = 正则表达式/
export const reg_tel_命名 = 正则表达式/
export const reg_tel_命名 = 正则表达式/
等等
3、使用正则表达式
例子:
//导入需要的正则表达式
import {reg_tel_phone} from "@/utils/regex";
data(){
return{
baseRules: {
ownerName: [
{ required:true, message:'请输入手机号',trigger:'blur'},
{ pattern:reg_tel_phone, message: '请输入正确的手机号' ,trigger:'blur'}
],
}
}
正则表达式:
//验证是否合法手机号或座机号
export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
效果
本人整理的正则表达式(如有问题,请留言)
//验证是否合法手机号或座机号
export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
//是否合法IP地址
export const reg_tel_ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
//验证是否合法身份证号码
export const reg_tel_idCard =/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
//验证是否合法邮箱
export const reg_tel_mailbox = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
//验证整数填写
export const reg_tel_integer = /^-?[1-9]\d*$/
//验证正整数填写
export const reg_tel_positiveInteger = /^[1-9]\d*$/
//验证是否是小写字母
export const reg_tel_lowercaseLetter = /^[a-z]+$/
//验证是否是大写字母
export const reg_tel_capitalLetter = /^[A-Z]+$/
//验证是否是大小写混合
export const reg_tel_mixedCase = /^[A-Za-z]+$/
//验证多个8位数字格式(yyyyMMdd)并以逗号隔开
export const reg_tel_digitalFormat = /^\d{8}(\,\d{8})*$/
//验证数字加英文,不包含特殊字符
export const reg_tel_numberPlusEnglish = /^[a-zA-Z0-9]+$/
//验证前两位是数字后一位是英文
export const reg_tel_theFirstTwoAndTheLastOneAreInEnglish = /^\d{2}[a-zA-Z]+$/
//密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
export const reg_tel_password = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
//中文校验
export const reg_tel_chinese = /^[\u0391-\uFFE5A-Za-z]+$/
确定按钮
如果用户直接按确定不会提示任何报错信息需要加点代码
<el-form ref="formRef" :model="form" label-width="120px" :rules="baseRules">
在表单这行中加上 ref="formRef"
示列
this.$refs['formRef'].validate(valid => {
// 判断是否验证通过
if(valid){
request.post("/OwnerInfo", this.form).then(res => {
console.log(res)
if (res.code === '0') {
this.$message({
type: "success",
message: "新增成功!"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
//刷新表格数据
this.load()
this.$refs["form"].clearValidate(); //移除校验结果
//关闭弹窗
this.dialogVisible = false
})
}
})
效果:
按下确定后出现报错信息