uniapp表单密码校验:判断两次密码输入是否一致

uniapp表单密码校验:

无需使用自定义validator进行校验,使用uniapp文档内自带的this.$u.test.object({value:password})即可。

  <u-form-item label="登陆密码" labelWidth="80" prop="password" borderBottom ref="item1">
      <u-input type="password" v-model="model1.password" border="none" placeholder="请输入密码"></u-input>
    </u-form-item>
    <u-form-item label="确认密码" labelWidth="80" prop="Tpassword" borderBottom ref="item1">
      <u-input v-model="model1.Tpassword" border="none" placeholder="请确认密码"></u-input>
    </u-form-item>

表单中,prop后是判定校验的规则名,v-model动态绑定data内的值。

data() {
      return {
        model1: {
            password: '',
            Tpassword: ''
        },
        rules: {
          'password': [{
            type: 'string',
            required: true,
            message: '不可为空',
            trigger: ['blur', 'change']
          }],
          'Tpassword': [{
            type: 'string',
            required: true,
            message: '密码不为空',
            trigger: ['blur', 'change']
          },{
          //使用异步方法进行校验
            asyncValidator: (rules, value, callback) => {
              if (value != this.model1.password){
                callback(new Error('两次密码校验不一致'))
              }
              return uni.$u.test.object({values:password});
            },
            message: '两次密码校验不一致',
            trigger: ["change","blur"]
          }]
        },
      }
},

在微信小程序中使用,如果不是自定义的判定校验,则在onready中添加setRules方法设置规则:

	onReady() {
	// 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules)
	},

最后表单提交的按钮上写submit,总结表单校验:

this.$refs.form1.validate().then(res => {
    console.log('表单数据信息',res);
      this.noSure();
    }).catch(err => {
      console.log('表单错误信息',err);
    })
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 HTML 中,可以使用 `<input>` 标签的 `type` 属性设置为 `"password"` 来创建密码输入框,同时使用 `<input>` 标签的 `type` 属性设置为 `"submit"` 来创建提交按钮。 为了判断两次密码是否一致并阻止提交,可以使用 JavaScript。具体实现方案如下: 1. 给两个密码输入框分别设置一个 ID,如 `password1` 和 `password2`。 ```html <input type="password" id="password1" name="password1"> <input type="password" id="password2" name="password2"> ``` 2. 给表单添加一个 `onsubmit` 事件,并在事件处理函数中编写 JavaScript 代码。 ```html <form onsubmit="return checkPassword()"> <!-- 表单内容 --> <input type="password" id="password1" name="password1"> <input type="password" id="password2" name="password2"> <input type="submit" value="提交"> </form> ``` ```javascript function checkPassword() { // 获取两个输入框的值 var password1 = document.getElementById("password1").value; var password2 = document.getElementById("password2").value; // 判断两个密码是否一致 if (password1 != password2) { alert("两次输入密码一致!"); return false; // 阻止表单提交 } // 如果两个密码一致,则允许表单提交 return true; } ``` 在上面的代码中,当用户点击提交按钮时,会触发表单的 `onsubmit` 事件,该事件会调用 `checkPassword()` 函数。该函数首先获取两个密码输入框的值,然后判断它们是否一致。如果两个密码一致,就弹出一个提示框,并返回 `false` 阻止表单提交;否则返回 `true` 允许表单提交。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值