众筹网站制作,长春高端网站建设,有创意的个人网站名字,湖州注册公司目录 前言
给表单绑定对应属性
在data中定义数据对象和表单的定义规则
与数据对象双向绑定
对整个表单进行验证 前言 在做项目时#xff0c;对于表单进行验证是我们必不可少的 例如
搭建一个基本的登录界面 div classformh1登录/h1对于表单进行验证是我们必不可少的 例如
搭建一个基本的登录界面 div classformh1登录/h1el-card shadownever classlogin-card!--登录表单--el-formel-form-itemel-input placeholder请输入手机号 //el-form-itemel-form-itemel-input placeholder请输入密码 //el-form-itemel-form-itemel-checkbox用户平台使用协议/el-checkbox/el-form-itemel-form-itemel-button stylewidth:350px typeprimary登录/el-button/el-form-item
/el-form 表单嵌套一般都是 el-form el-form-item el-input 进行验证前我们需要先
给表单绑定对应属性 对el-form标签我们绑定三个属性 ref:该属性是为了能获取到表单组件 model表单的数据对象 rules表单的定义规则 el-form refform :modelloginForm :rulesloginRules/el-form 在data中定义数据对象和表单的定义规则 model数据对象loginForm: rules规则对象loginRules: 如上代码 对于验证规则的制定中 required:true/false(是否必填) message:提示信息 trigger:通过什么触发一般都是blur失去焦点时触发 pattern:正则表达式 min最少位数 max最大位数 对于复选框的验证,required是无法进行验证的required只能坚持null 和 undefine 对于复选框的验证使用 自定义校验 validator:(){} 回调函数三个参数 rule规则 value检查的数据 true/false是否勾选 callback 函数 执行这个函数 代码 data() {return {loginForm: {phoneNumber: ,password: ,isAgree: true},// 校验规则loginRules: {phoneNumber: [{required: true,message: 请输入手机号,trigger: blur}, {pattern: /^1[3-9]\d{9}$/,message: 手机号格式不正确,trigger: blur}],password: [{required: true,message: 请输入密码,trigger: blur}, {min: 6,max: 12,message: 密码应在6-12位,trigger: blur}],isAgree: [{validator: (rule, value, callback) {value ? callback() : callback(new Error(必须要勾选用户平台协议))}}]}}} 与数据对象双向绑定 el-form refform :modelloginForm :rulesloginRulesel-form-item propphoneNumberel-input v-modelloginForm.phoneNumber placeholder请输入手机号 //el-form-itemel-form-item proppasswordel-input v-modelloginForm.password show-password placeholder请输入密码 //el-form-itemel-form-item propisAgreeel-checkbox v-modelloginForm.isAgree用户平台使用协议/el-checkbox/el-form-itemel-form-itemel-button stylewidth:350px typeprimary clicklogin登录/el-button/el-form-item
/el-form el-form-item/el-form-item 表单验证必须填写prop参数 使用v-model双向绑定data中的数据对象 对于密码框 加上 show-password 密码就不是明文 对整个表单进行验证
点击登录时需要对整个表单进行验证
使用
validate login() {this.$refs.form.validate((isOK) {if (isOK) {alert(校验通过)}})} 点击登录时调用该方法对表单进行验证 完整代码 template
div classformh1登录/h1el-card shadownever classlogin-card!--登录表单--el-form refform :modelloginForm :rulesloginRulesel-form-item propphoneNumberel-input v-modelloginForm.phoneNumber placeholder请输入手机号 //el-form-itemel-form-item proppasswordel-input v-modelloginForm.password show-password placeholder请输入密码 //el-form-itemel-form-item propisAgreeel-checkbox v-modelloginForm.isAgree平台用户协议/el-checkbox/el-form-itemel-form-itemel-button stylewidth: 350px; typeprimary clicklogin登录/el-button/el-form-item/el-form/el-card/div/div
/template
scriptexport default {name: Login,data() {return {isShow: false,loginForm: {phoneNumber: ,password: ,isAgree: true},// 校验规则loginRules: {phoneNumber: [{required: true,message: 请输入手机号,trigger: blur}, {pattern: /^1[3-9]\d{9}$/,message: 手机号格式不正确,trigger: blur}],password: [{required: true,message: 请输入密码,trigger: blur}, {min: 6,max: 12,message: 密码应在6-12位,trigger: blur}],isAgree: [{validator: (rule, value, callback) {value ? callback() : callback(new Error(必须要勾选用户平台协议))}}]}}},methods: {login() {this.$refs.form.validate((isOk) {if (isOk) {alert(表单验证成功)}})}}
}
/script
