表单校验二

本文介绍HTML5新增的表单验证属性,包括提示信息、必填检查、类型匹配等功能,并详细解释了如何配置JDK环境变量。

HTM5新增属性

placeholder  提示,输入为空时显示提示信息,获得焦点输入时提示信息消失

required  输入不能为空

pattern   校验input域的模式(正则表达式)

validity属性

validityState对象

属性          描述

valueMissing      表单元素设置了required特性,则为必填项。如果必填项的值为空,就无法通过表单验证,valueMissing属性会返回true,否则返回false。

typeMismatch     输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等,都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合,则        typeMismatch属性将返回true,否则返回false。

patternMismatch  输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则,则patternMismatch属性将返回true,否则返回false。

 

stepMismatch    输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性,这就限制了输入的值必须是最小值与step特性值的倍数之和。

customError      使用自定义的验证错误提示信息

  方法              描述

  setCustomValidity( )方法     自定义错误提示信息

  setCustomValidity(message)    把错误提示信息自定义为message,此时customError属性值为true;

  setCustomValidity("")      会清除自定义的错误信息,此时customError属性值为false。

tooLong    限定最大长度maxLength   输入的内容超过了最大长度限制,则tooLong属性返回true,否则返回false。

rangeUnderflow   限定输入值小于min特性的值     小于最小值  ture   反之false

rangeOverflow      输入的值大于max特性的值   大于最大值  ture  反之false

 

配置JDK环境变量(win10)

我的电脑--高级系统设置---环境变量---系统变量

变量        

JAVA_HOME    C:\Program Files\Java\jdk1.8.0_141 (bin的上一级)

JRE_HOME      C:\Program Files\Java\jre1.8.0_141

Path          C:\Program Files\Java\jdk1.8.0_141\bin;C:\Program Files\Java\jdk1.8.0_141\jre\bin

ClassPath      .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

 

转载于:https://www.cnblogs.com/jiayiblog/p/10977624.html

Element UI 表单校验可以通过内置的校验规则和自定义规则来实现。以下是基本的两种表单校验: 1. 内置校验规则 Element UI 提供了一些内置的校验规则,可以直接在表单上使用。例如: ```html <el-form :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> </el-form> ``` 在上面的代码中,`prop` 属性指定了表单对应的数据字段名,`rules` 属性指定了校验规则。在 `rules` 中,可以使用内置的校验规则,例如: ```js rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } ``` 在上面的代码中,`required` 必填,`min` 和 `max` 示最小和最大长度。`trigger` 属性指定了触发校验的事件,例如 `blur` 示失去焦点时校验,`change` 变化时校验。 2. 自定义规则 除了内置的校验规则,还可以通过自定义规则来实现表单校验。例如,如果要验证两次输入的密码是否一致,可以使用以下代码: ```js rules: { password2: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: this.checkPassword2, trigger: 'blur' } ] }, methods: { checkPassword2(rule, value, callback) { if (value !== this.form.password) { callback(new Error('两次输入的密码不一致')); } else { callback(); } } } ``` 在上面的代码中,`validator` 属性指定了自定义校验函数,该函数接收三个参数:校验规则对象、当前表单、回调函数。如果校验不通过,回调函数应该传递一个 Error 对象,其中包含错误消息。如果校验通过,则直接调用回调函数即可。 以上是 Element UI 表单校验的基本用法,可以根据实际需求进行扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值