Jquery easyui는 매우 좋은 UI 프레임워크이지만 두 출력 상자의 값이 동일한지 확인하기 위해 양식 유효성 검사에서 가장 일반적으로 사용되는 확인 방법이 없어서 확장을 만들었습니다.
$.extend($.fn.validatebox.defaults.rules, { /*必须和某个字段相等*/ equalTo: { validator:function(value,param){ return $(param[0]).val() == value; }, message:'字段不匹配' } });
사용 예:
密码: <input id="password" name="password" validType="length[4,32]" class="easyui-validatebox" required="true" type="password" value=""/> <br/> 确认密码:<input type="password" name="repassword" id="repassword" required="true" class="easyui-validatebox" validType="equalTo['#password']" invalidMessage="两次输入密码不匹配"/>
validType 속성을 equalTo['#password']로 지정하면 됩니다.
물론 이 작은 플러그인을 사용하려면 먼저 jquery easyui의 js 라이브러리를 참조해야 합니다.
양식에 있는 두 비밀번호가 일치하는지 확인하기 위해 jQuery.validate를 사용할 때 작은 문제가 발생했습니다. 다음은 제가 작성한 코드입니다.
$("#aspnetForm").validate({ rules: { txtName: { required: true }, txtTrueName: { required: true }, txtPass: { required: true, minlength: 3 }, txtTwoPass: { required: true, minlength: 3, equalTo: "#txtPass" }, txtEmail: { required: true, email: true }, txtAddress: { required: true }, txtPhone: { required: true } }, messages: { txtName: { required: "*请输入用户名" }, txtTrueName: { required: "*请输入姓名" }, txtPass: { required: "*请输入密码", minlength: "*密码不能小于3个字符" }, txtTwoPass: { required: "*请输入确认密码", minlength: "*密码不能小于3个字符", equalTo: "*请再次输入相同的值" }, txtEmail: { required: "*请输入邮箱", email: "*请输入正确的邮箱格式" }, txtAddress: { required: "*请输入地址" }, txtPhone: { required: "*请输入手机号码" } } });
두 개의 비밀번호를 동일하게 입력했는데 왜 계속 메시지가 표시되나요? 이는 다른 브라우저와 다른 버전의 유효성 검사를 시도한 후에도 마찬가지입니다.
혹시 비슷한 문제를 겪으신 분이 있을지 모르겠습니다. 여러 글을 확인하고 문제 해결을 위한 아이디어를 정리했습니다.
이 글이 여러분에게 영감을 줄 수 있기를 바랍니다. 읽어주셔서 감사합니다. 앞으로도 열심히 하겠습니다.