vue+elementui 封装表单验证

其实很简单:步骤1:先用element 把页面写出来;步骤2.规则验证,需要自定义验证的,引入对应的自定义验证方法, 3.封装一个自定义验证的js。

1.先把结构写出来;

注意: from 表单上有model(绑定数据),ref(提交的时有用),rules(对表单的验证规则),这三者缺一不可。

2.代码:

<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" maxlength="10" type="text"></el-input>

</el-form-item>

<el-form-item label="电话号码" prop="phone">

<el-input v-model="ruleForm.phone" type="number" maxlength=11></el-input>

</el-form-item>

<el-form-item label="活动区域" prop="region">

<el-select v-model="ruleForm.region" placeholder="请选择活动区域">

<el-option label="区域一" value="shanghai"></el-option>

<el-option label="区域二" value="beijing"></el-option>

</el-select>

</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>

3.data里面操作数据;

代码:

import Format from "../commonJs/common.js"

data() {

return {

ruleForm: {

name: ‘‘,

phone: ‘‘,

region: ‘‘,

},

rules: {

name: [

{

validator: Format.FormValidate.Form().Name,   //validator: 自定义验证规则

trigger: "blur"

}

],

phone: [

{

validator: Format.FormValidate.Form().Tel,

trigger: "blur"

}

],

region: [

{ required: true, message: ‘请选择活动区域‘, trigger: ‘change‘ }  //验证

],

}

};

},

4.编写表单验证js(新建一个js)

let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

let email = /^(\w+\.?)*\[email protected](?:\w+\.)\w+$/    //邮箱

let tel = /^1[345789]\d{9}$/        //手机号码

let fax = /^(\d{3,4}-)?\d{7,8}$/    //传真

let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/;   //姓名

let FormValidate = (function () {

// eslint-disable-next-line

function FormValidate() {}

// From表单验证规则  可用于公用的校验部分

FormValidate.Form = function () {

return {

// 姓名的验证规则

Name: function (rule, value, callback) {

if (!value) {

return callback(new Error(‘姓名不能为空‘))

}

if (!name.test(value)) {

callback(new Error(‘请输入正确姓名!‘))

} else {

callback()

}

},

// 邮箱的正则

Email: function (rule, value, callback) {

if (!value) {

return callback(new Error(‘邮箱不能为空‘))

}

if (!email.test(value)) {

callback(new Error(‘请输入正确的邮箱!‘))

} else {

callback()

}

},

// 身份证的验证规则

ID: function (rule, value, callback) {

if (!value) {

return callback(new Error(‘身份证不能为空‘))

}

if (!regId.test(value)) {

callback(new Error(‘请输入正确的二代身份证号码‘))

} else {

callback()

}

},

// 电话号码的验证

Tel: (rule, value, callback) => {

if (!value) {

return callback(new Error(‘电话不能为空‘))

}

if (!tel.test(value)) {

callback(new Error(‘请正确填写电话号码‘))

} else {

callback()

}

}

}

}

// FromOne表单验证规则  用于FromOne个性化的校验

FormValidate.FormOne = function () {

return {

// 姓名的验证规则

Name: function (rule, value, callback) {

if (!value) {

return callback(new Error(‘姓名不能为空‘))

}

if (!name.test(value)) {

callback(new Error(‘请输入正确姓名!‘))

} else {

callback()

}

}

}

}

return FormValidate

}())

exports.FormValidate = FormValidate

5.点击提交/重置事件

代码:

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();

}

},

6.demo展示

原文地址:https://www.cnblogs.com/hemei1212/p/12069241.html

时间: 2024-10-07 07:59:45

vue+elementui 封装表单验证的相关文章

element-ui Form表单验证

element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种form表单的验证规则,为了便于阅读,验证规则是拆分的,完整的代码放在文末 1. 普通输入验证 <el-form-item label="活动名称" prop="name"> <!-- validate-event属性

element-ui 自定义表单验证 , 但是不出现小红心了

基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码"

ElementUI的表单验证数字类型(输入了数据依然报错的原因)

https://www.cnblogs.com/oldli/articles/9557635.html 当需要验证的字段是数字类型的时候,需要使用 v-model.number 来绑定,否则验证的时候会当做字符串处理,结果就无法验证 <el-form-item label="可透支额:" prop="overdraw"> <el-input v-model.number="form.overdraw" type="nu

element-ui表单验证(电话,邮箱)

element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组件配合使用,这里为了简洁,就不放那么多代码,如果你刚好有用到其他功能的可以留言发其他功能的源码 // 这是HTML部分 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label

Vue+Element-UI 多个form表单验证

在开发的过程中   有时根据业务需求提交的表单内容分区分块  内容繁多 业务控制相对复杂的时候  我们应该将页面内容分成若干个组件  这样方便后期维护查找问题  不然时间长了后期维护找问题头都大了 如上图所示  页面表单分为基本设置,上架设置,更多设置3大块  分别将3大块写到3个组件(A,B,C) 提交表单的时候我们要进行表单验证 思路:利用ES6 Promise异步控制 代码如下 组件A <el-form :model="ruleForm" :rules="rule

表单验证封装,一招学会,永远受用

身为web开发人员,在开发产品的时候,基本都离不开一大堆的表单前端验证,有比较常见的登录注册的前端验证,还有一些提交信息的表单验证,在判断到书写的格式不正确的时候,告诉用户哪里书写格式填写错误,并且在整个表单只有有一处错误的时候,让提交按钮禁止点击,一方面让整个产品有更好的体验,另一方面也是整个产品开发更加的严谨,近期我就总结了一套表单验证的javaScript,特来给大家分享一下.附上github地址:https://github.com/jiutianxuannan/validator 1

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

第一百五十三节,封装库--JavaScript,表单验证--备注字数验证

封装库--JavaScript,表单验证--备注字数验证 效果图

JavaScript 之表单验证(表单验证器的封装)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>