校验输入的两次密码是否一致的问题

使用jQuery框架中的validate插件,messages为提示信息。首先导入相应的js文件。

<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>

----------   我是懒惰的分割线,因为我懒的分割     -----
<form id="myform">
<input type="password" id="new_password" name="new_password" placeholder="输入新密码"/>

<input type="password" id="confirm_password" name="confirm_password" placeholder="确定新密码"/>
</form>
<script>
$(function() {
$("#myform").validate({
       rules:{                 
          new_password:{
               required:true,
           },
          confirm_password:{
               required:true,
               equalTo:"#new_password"    //新密码的id选择器
           }                    
       },
       messages:{
          new_password:{
               required: "请输入新密码",
           },
          confirm_password:{
               required: "请确认新密码",
               equalTo:"两次密码输入不一致"
           }                                    
       }  
}) 
};
</script>

这是一个很常见的端表单校验问题,以下是一种实现方式: 1. 给所有必填项设置必填校验,如果有未填写的必填项,阻止表单提交并提示用户填写完整。 2. 给原密码输入框添加失去焦点事件,当用户离开该输入框时,校验密码是否正确。如果不正确,提示用户原密码错误,并将光标定位在原密码输入框中。 3. 给第一次密码输入框添加失去焦点事件,当用户离开该输入框时,校验密码是否符合要求。如果不符合要求,提示用户密码不符合要求,并将光标定位在第一次密码输入框中。如果符合要求,则将光标定位在第二次密码输入框中。 4. 给第二次密码输入框添加失去焦点事件,当用户离开该输入框时,校验两次密码是否一致。如果不一致,提示用户两次密码输入一致,并将光标定位在第一次密码输入框中。 以下是一个示例代码实现: ```javascript // 获取表单元素 const form = document.querySelector('form'); const nameInput = document.querySelector('#name'); const passwordInput = document.querySelector('#password'); const newPasswordInput = document.querySelector('#newPassword'); const confirmNewPasswordInput = document.querySelector('#confirmNewPassword'); // 给所有必填项添加必填校验 form.addEventListener('submit', (event) => { if (!nameInput.value || !passwordInput.value || !newPasswordInput.value || !confirmNewPasswordInput.value) { event.preventDefault(); alert('请填写完整信息'); } }); // 给原密码输入框添加失去焦点事件,校验密码是否正确 passwordInput.addEventListener('blur', () => { const namePinyin = '...'; // 根据用户姓名获取拼音 if (passwordInput.value !== namePinyin) { alert('原密码错误'); passwordInput.focus(); } }); // 给第一次密码输入框添加失去焦点事件,校验密码是否符合要求 newPasswordInput.addEventListener('blur', () => { const password = newPasswordInput.value; if (password.length < 6 || password.length > 12) { alert('密码长度应为6-12位'); newPasswordInput.focus(); } else { confirmNewPasswordInput.focus(); } }); // 给第二次密码输入框添加失去焦点事件,校验两次密码是否一致 confirmNewPasswordInput.addEventListener('blur', () => { const newPassword = newPasswordInput.value; const confirmNewPassword = confirmNewPasswordInput.value; if (newPassword !== confirmNewPassword) { alert('两次密码输入一致'); newPasswordInput.focus(); } }); ``` 以上示例代码仅供参考,实际使用时需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值