>웹 프론트엔드 >JS 튜토리얼 >jquery는 두 번 입력한 비밀번호가 equal_jquery인지 확인합니다.

jquery는 두 번 입력한 비밀번호가 equal_jquery인지 확인합니다.

WBOY
WBOY원래의
2016-05-16 15:28:222376검색

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: "*请输入手机号码"
          }
        }
      });

두 개의 비밀번호를 동일하게 입력했는데 왜 계속 메시지가 표시되나요? 이는 다른 브라우저와 다른 버전의 유효성 검사를 시도한 후에도 마찬가지입니다.

혹시 비슷한 문제를 겪으신 분이 있을지 모르겠습니다. 여러 글을 확인하고 문제 해결을 위한 아이디어를 정리했습니다.

  • 먼저 HTML 페이지의 두 가지 비밀번호 유형에 ID가 할당되어 있는지 확인하세요.
  • 또는 페이지에 txtPass ID가 두 개 있는지 검색하세요.
  • 또는 먼저 equalTo를 제거하고 다른 오류가 있는지 다시 확인한 후 다시 돌아가서 이 문제를 해결할 수도 있습니다.

이 글이 여러분에게 영감을 줄 수 있기를 바랍니다. 읽어주셔서 감사합니다. 앞으로도 열심히 하겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.