扩展validatebox，添加验证两次密码功能

最新推荐文章于 2022-11-09 22:56:06 发布

呆萌程序员

最新推荐文章于 2022-11-09 22:56:06 发布

阅读量494

点赞数

分类专栏： JAVA开发过程记录文章标签： easyui javascript 扩展

本文链接：https://blog.youkuaiyun.com/dddquk/article/details/50804546

版权

JAVA开发过程记录专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在JavaScript中扩展validatebox组件，添加验证两次密码输入是否一致的功能。通过实例展示了如何使用EasyUI控件实现这一需求，并提供了两种验证方法：纯客户端验证和Ajax验证。此外，还说明了如何在表单提交前阻止提交，以确保密码一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Js代码

/**
* @author admin
*
* @requires jQuery,EasyUI
*
* 扩展validatebox，添加验证两次密码功能
*/
$.extend($.fn.validatebox.defaults.rules, {
eqPassword : {
validator : function(value, param) {
return value == $(param[0]).val();
},
message : '密码不一致！'
}
});

先扩展validatebox

使用的时候，

Html代码

<form id="modifyPwdForm" method="post">
<input name="ids" type="hidden" />
<table class="tableForm">
<tr>
<th>新密码</th>
<td><input name="cpwd" type="password" class="easyui-validatebox" required="true" missingMessage="请填写新密码" /></td>
</tr>
<tr>
<th>重复</th>
<td><input name="recpwd" type="password" class="easyui-validatebox" required="true" missingMessage="请再次填写新密码" validType="eqPassword['#modifyPwdForm input[name=cpwd]']" /></td>
</tr>
</table>
</form>

另附两种验证方法：

1.纯客户端验证

使用easyui控件中的validatebox，配置required='true'等

2.Ajax验证

$("#password").validatebox({required:"true" ,validType:"remote['"+js+"system/validatePasswordOperator.action','password']",invalidMessage:"原密码输入不正确"})

3.验证未通过禁止SUBMIT

     $('#addEmployee').form({
        url:'admin/employee/add',
        onSubmit:function(){
            return $(this).form('validate');
        },
        success:function(data){
            alert(data);
        }
    });