内网小网站的建设,如果网站设计时,wordpress调取文章,一级造价师准考证打印时间示例#xff1a;代码在末尾 可以直接复制使用 一、基本属性认知#xff1a; 1. required: true 会有 * #xff0c; 但仅是触发最后点击提交按钮时#xff0c;校验某一项位必填#xff1b;与输入事件或者选择或者失焦时候 怎么校验无关 #xff08;这时候的校验取决于是… 示例代码在末尾 可以直接复制使用 一、基本属性认知 1. required: true 会有 * 但仅是触发最后点击提交按钮时校验某一项位必填与输入事件或者选择或者失焦时候 怎么校验无关 这时候的校验取决于是否写了具体的校验规则 为false则提交时可不填(默认false) 但是同时取决于validator的callback()返回是空还是返回报错提示 2. validator: 自定义校验方法 需要声明变量和错误提示 3. trigger: 触发校验方法 4. message: 错误提示 5.type校验的数据类型 6.自定义校验方法 var isMobile (rule, value, callback) { } return callback(new Error(‘错误提示信息’)) callback() 透过校验 7.手动代码校验某一项表单或者手动代码清空某一项表单的校验结果 this.$refs[‘ruleFormName’].validateField(‘name’) //检验name这一项表单 this.$refs[‘ruleFormName’].clearValidate(‘name’)//清空name的校验结果 以下代码可直接复制使用
templatediv classbig_boxdiv采用 a hrefhttps://element.eleme.cn/#/zh-CN/component/form 自定义校验规则和表单验证 案例/a /divel-form refformObj :modelformObj :status-iconfalse :rulesrules label-width100px classdemo-ruleForm!-- :status-iconfalse 可以去除校验后的对错图标 --el-form-item label活动名称 propuserNameel-input v-modelformObj.userName placeholderrequired: true 加* 仅触发点击提交时必填如不设置则会根据校验规则自动生成/el-input/el-form-itemel-form-item propmobile label手机el-input v-modelformObj.mobile placeholder手机号可不填写 但若填写会校验 maxlength11 clearable/el-input/el-form-itemel-form-item propaddress label地址el-input v-modelformObj.address placeholder不校验可以不写校验规则{ } 或者写required: false 表示点击提交不校验是否填写 clearable/el-input/el-form-itemel-form-item label密码 proppassel-input v-modelformObj.pass typepassword/el-input/el-form-itemel-form-item label确认密码 propcheckPassel-input v-modelformObj.checkPass typepassword/el-input/el-form-itemel-form-item label年龄 propageel-input v-model.numberformObj.age/el-input/el-form-itemel-form-item label车牌号码 propcarIdel-input v-model.numberformObj.carId placeholder车牌号码可不填写 填写检验格式 京AAAAAA 京A9999警 自动转换大小写和I O changechangeCar/el-input/el-form-itemel-form-item label活动区域 propregionel-select v-modelformObj.region stylewidth:100%; clearable placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动性质 propsportel-checkbox-group v-modelformObj.sportel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(formObj)提交/el-buttonel-button clickresetForm(formObj)重置/el-button/el-form-item/el-form/div
/templatescript
export default {data () {var isMobile (rule, value, callback) {if (!value) {// return callback(new Error(请输入电话号码))//这个是必须填写callback()// 这个是可 不填写} else {const reg /^\d{11}$/const isPhone reg.test(value)value Number(value) // 转换为数字if (typeof value number !isNaN(value)) {// 判断是否为数字value value.toString() // 转换成字符串if (value.length 0 || value.length 12 || !isPhone) {// 判断是否为11位手机号callback(new Error(请输入11位手机号码))} else {callback()}} else {callback(new Error(请输入正确手机号码))}}}var validatePass (rule, value, callback) {if (value ) {callback(new Error(请输入密码))} else {if (this.formObj.checkPass ! ) {// 触发部分表单字段进行校验的方法 例如通过 密码pass 失焦 来触发检验 确认密码checkPass 的校验this.$refs.formObj.validateField(checkPass)}callback()}}var validatePass2 (rule, value, callback) {if (value ) {callback(new Error(请再次输入密码))} else if (value ! this.formObj.pass) {callback(new Error(两次输入密码不一致!))} else {callback()}}var checkAge (rule, value, callback) {if (!value) {return callback(new Error(年龄不能为空)) // 打开这个就是必填// callback()// 打开这个就是非必填}setTimeout(() {if (!Number.isInteger(value)) {callback(new Error(请输入数字值))} else {if (value 18) {callback(new Error(必须年满18岁))} else {callback()}}}, 10)}var checkCar (rule, value, callback) {if (!value) {return callback()} else {var result falseif (value.length 7) {// 车牌是7位时候规则为 省份简称或大写字母共1位大写字母共1位大写字母或者数字共4位大写字母或数字或特殊汉字1位 例如:AAAAAAA 京A9999警var express /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/result express.test(value) // 满足条件时候 正则结果是true} else if (value.length 8) {// 8位的为新能源汽车规则var express2 /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9挂学警港澳]{1}$/// var express3 /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/// 查看新能源车的具体规则其实需要用到express3匹配更精准 https://blog.csdn.net/tangjili5620/article/details/77159453result express2.test(value)}if (result) {callback()} else {callback(new Error(请输入正确车牌号码))}return result}}return {formObj: {userName: ,mobile: ,address: ,pass: ,checkPass: ,age: ,carId: ,region: ,sport: []},rules: {// required: true 会有* 仅触发点击提交时必填 为false则提交时可不填(默认false) 但是同时取决于validator的callback()返回是空还是返回报错提示(例如 checkAge )// 与输入事件或者选择或者失焦时候 怎么校验无关 这时候的校验取决于是否写了具体的校验规则userName: [{ required: true, message: 请输入活动名称, trigger: blur },{ min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur }],mobile: [{ validator: isMobile, trigger: blur }], // validator 自定义校验方法address: [{}], // 地址不校验可以不写 或者写required: false 表示点击提交不校验是否填写pass: [{ validator: validatePass, trigger: blur }],checkPass: [{ validator: validatePass2, trigger: blur }],age: [{ validator: checkAge, trigger: blur }],carId: [{ validator: checkCar, trigger: change }],region: [{ required: true, message: 请选择活动区域, trigger: change }],sport: [{ type: array, required: true, message: 请至少选择一个活动性质, trigger: change }]// 校验的字段类型}}},methods: {// 将车牌输入的小写改成大写 车牌的I和O改成1和0changeCar (val) {let str val.toUpperCase().replace(/I/g, 1).replace(/O/g, 0)this.formObj.carId str},submitForm (formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!)} else {console.log(error submit!!)return false}})},resetForm (formName) {this.$refs[formName].resetFields()}}
}
/script
style langless scope
.big_box {width: 100%;.demo-ruleForm {width: 700px;margin-left: -webkit-calc(~50vw - 350px);margin-left: -moz-calc(~50vw - 350px);margin-left: calc(~50vw - 350px);.el-checkbox-group {text-align: left;}}
}
/style
