element表单校验

通过一个案例来示意：element的表单校验

html部分：

<template><div id="app"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!-- 设置prop属性 （校验谁写谁的字段 ） --><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="数字" prop="num"><el-input type="text" v-model="ruleForm.num" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm.age"></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>

js 部分：

export default {data(){var quYu = (rule, value, callback) => { // 数字校验if (value.length == 0) {return callback(new Error("数值不能为空，没有请填0"));}if (value < 0) {return callback(new Error("数值不能为负数"));}if (!(/^[-+]?\d+$/).test(value)) {return callback(new Error("请输入正整数或0"));}if (value.length > 9) {callback(new Error("数值长度不能超过9个字符"));} else {callback();}};return {ruleForm:{ // 先在data中定义el-form 中model绑定的值pass:'',num:'',age:''},rules: { // 进行表单校验
/*        required  如果为true，表示该字段为必填message  当不满足设置的规则时的提示信息pattern  正则表达式，通过正则验证值min 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值max    当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值trigger    校验的触发方式，change（值改变） / blur （失去焦点）两种，validator 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))*/pass: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],num: [{validator:quYu, trigger: 'change' }// validator自定义校验的规则],age: [{ type: 'date', required: true, message: '年龄', trigger: 'blur' },{ pattern: /^([0]|[1-9][0-9]*)$/, message: "请输入0或正整数", trigger: ['blur', 'change'] } // pattern通过正则表达式验证值],}}},};

表单校验的相关属性：

required 如果为true，表示该字段为必填

message 当不满足设置的规则时的提示信息

pattern 正则表达式，通过正则验证值

min 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值

max 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值

trigger 校验的触发方式，change（值改变） / blur （失去焦点）两种，

validator 如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

element表单校验相关推荐

element表单校验输入框手动清空时出现XXX is required提示
使用element UI el-form表单校验时,当输入框手动清空内容时会出现XXX( Form-Item 的 prop 属性设置的校验字段名) is required提示,输入框失去焦点之后,又恢 ...
vue+element表单校验
1.字母数字组合 export function numberSrting(rule, value, callback) { if (!value) { callback(); } else { le ...
Element 表单只能输入数字校验
Element 表单只能输入数字校验以下验证均为只能输入数字类型只能输入整数 <el-input v-model="value" placeholder="请输 ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
element ui表单校验prop的链式写法----源码分析
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width=& ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...

element表单校验

element表单校验相关推荐

最新文章

热门文章