首页 > 其他分享 >vant组件一个文本框添加多项校验

vant组件一个文本框添加多项校验

时间:2023-12-06 17:58:57浏览次数:33  
标签:return vant 校验 rule 密码 文本框 false message

下图为用户密码校验表单,需要对密码是否为空,密码长度,以及密码强度进行校验。

但是 “密码格式不正确!”这个校验信息并不是我想要的,我想在isPassWordStrength方法中区分开密码长度提示和密码强度提示,方便用户知道具体是什么问题导致校验不通过。

<van-field
   required
   v-model="formCustom.loginPwd"
   :type="passwordType"
   :rules="[
     { required: true, message: '请输入登录密码!'},
     { validator: isPassWordStrength, message: '密码格式不正确!'}
    ]"
    label="登录密码"
>
</van-field>

解决方法:isPassWordStrength方法第一个参数为用户输入的值,第二个参数为校验规则,可自行打印看下,就不展示了。当我们在方法中通过逻辑判断,知道密码存在的问题后,手动修改rule中的message属性为自己想要的字符串,然后return false;,

报错信息即可在表单校验中展现。如果密码没问题,return true;就可以。

isPassWordStrength: (value, rule) => {
  //value: 用户在文本框中输入的内容
 //rule: 表单校验规则,其中需要用到的就是里面的 message属性
    if(密码长度不够){       rule.message = '密码长度应不小于12位!'       return false;     } else if(密码强度不够){       rule.message = '密码必须包含数字、大写或小写字母和特殊字符四种中的三种!'       return false;     } else {       //校验通过       return true;     } },

 

标签:return,vant,校验,rule,密码,文本框,false,message
From: https://www.cnblogs.com/hllzww/p/17880159.html

相关文章

  • Java Spring Boot 参数校验及自定义校验
    在项目开发中,时常会碰到前端传递过来的请求参数需要校验,毕竟永远不要相信没有经过自己校验的数据,如果是零星几个参数,直接if...elseif...else...即可,但数据量大了,同时为了尽可能地增加复用,这里就可以用到参数校验了,如果你觉得框架提供的校验方法不够用,或者你的校验比较个性化,那......
  • 基于element-plus实现表单校验
    官网https://element-plus.org/zh-CN/component/form.html#自定义校验规则需求在日常开发中,我们需要对表单的内容进行校验,确保用户输入的符合我们正常的业务,并赋予正确的提示,以登录注册举例:功能需求说明:注册功能(校验+注册)当用户输入用户名移开文本框后,也就是失去焦点时,需......
  • 数据校验
    数据校验表单中以增加和修改下的弹窗里的el-form表单标签为例:表单标签:<el-form:model="addGoodsDate":rules="rule"ref="goodsFormRef">:model是ElementUI中的一个属性,用于指定表单的数据模型(和<el-table>里的:data同理,为显示的数据)注意:是Vue提供了......
  • vue实现请再次输入密码的表单校验
    1、获取第一次输入的密码的值2、比较两次密码的值是否相等3、如果不一致返回错误信息this.userInfo.password2:获取第一次输入的密码;value当前校验值;validator自定义校验规则;constConfirmPassword=(rule,value,callback)=>{if(value!==this.userInfo.password2){......
  • vue2+element 表单内使用el-rate组件时,校验失败后重新校验通过了,但校验提示信息未消
    问题:el-rate组件自定义的校验规则,必填项。打开表单,不做任何动作,点击提交,这时表单校验一次,然后再选择el-rate组件的评分,校验提示却并未消除。问题复现:1.打开表单,直接点确定 2.填写完所有的选项后,仍未消除提示 解决:首先排除了v-model是否绑定正确,单词有无错误,校验有没有写......
  • antd 表单外提交进行规则校验
    import{Form,Input,Button}from'antd';constMyForm=()=>{constonFinish=(values)=>{console.log('Formvalues:',values);};constvalidateFields=()=>{form.validateFields().then(()=>......
  • Linux校验文件MD5和SHA值的方法
    1、需求背景下载或传输文件后,需要计算文件的MD5、SHA256等校验值,以确保下载或传输后的文件和源文件一致2、校验方法如上图所示,可以使用Linux自带的校验命令来计算一个文件的校验值Linux自带的校验命令有:md5sum、sha1sum、sha224sum、sha256sum、sha384sum、sha512sum......
  • Java系列---【时间格式合法性校验】
    #不能用LocalDate.parse(),解析不了20230231,默认会解析成20230228,并且不抛异常,用Strict模式,虽然会抛异常但无法解析20230201,推荐下面的publicstaticbooleanisValidDateFormat(Stringdate,Stringformat){if(date.length!=format.length){returnfalse;}......
  • 用C#实现的几种常用数据校验方法整理(CRC校验;LRC校验;BCC校验;累加和校验)
    CRC即循环冗余校验码(CyclicRedundancyCheck):是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定。循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计算,并将得到的结果附在帧的后面,接收设备也执行类似的算法,以保证数据传输的正确性和完......
  • javaswing 文本框的使用lambal表达式的应用
    package百度翻译实验;importjava.text.SimpleDateFormat;importjava.util.Date;importjavax.swing.JButton;importjavax.swing.JFrame;importjavax.swing.JLabel;importjavax.swing.JPanel;importjavax.swing.JTextField;publicclassframeextendsJFrame......