집 > 기사 > 웹 프론트엔드 > Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현

Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현

高洛峰원래의: 2017-01-03 17:36:321281검색

프론트엔드와 백엔드를 배울 때 가장 먼저 접하게 되는 업무는 아마도 사용자 등록과 로그인일 것입니다. 요즘 사회는 사람 중심의 개념을 고수하고 있으며 웹 사이트 개발 과정에서도 마찬가지입니다. 사용자는 우리가 가장 많이 직면하는 객체이자 가장 핵심적인 객체이기도 합니다. 초기 사용자 등록 및 로그인은 특히 중요합니다.

사용자 등록과 로그인이 생각보다 어려운 경우가 많습니다. 예를 들어, 양식 확인은 실제로 많은 내용을 다루고 있습니다.

1. 정규식에 대한 기본 이해

사실 정규식은 다음과 같습니다. 어렵지 않으며, 배우고 나면 큰 성취감을 느낄 수 있으며, 절반의 노력으로 두 배의 결과를 얻을 수 있는 효과를 누릴 수 있습니다.

2. Ajax 비동기 요청

사용자 이름이 존재하는지 확인하거나 사용자가 잘못된 계정이나 비밀번호로 로그인하는 경우 해당 프롬프트를 표시합니다.

3. jQuery.validate와 같은 몇 가지 편리한 유효성 검사 라이브러리

이러한 일반적인 요구 사항과 특정 복잡성으로 인해 부트스트랩 양식 및 jQuery.validate 양식 유효성 검사와 같은 몇 가지 우수한 클래스가 설계되었습니다. 사람들의 UI 및 양식 유효성 검사 문제를 해결합니다.

다음은 bootstrap+jQuery.validate를 사용하여 만든 인터페이스입니다.

Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현

1. 레벨 양식

1. 기본 양식

기본 양식 구조는 Bootstrap과 함께 제공됩니다. 기본 양식을 만드는 단계는 다음과 같습니다.

부모 요소

클래스 .form-group을 사용하여

에 라벨과 컨트롤을 배치합니다. 이는 최적의 간격을 확보하는 데 필요합니다.
모든 텍스트 요소 ,

및 <select>에 클래스 .form-control을 추가합니다. <pre class="brush:js;toolbar:false"><form role="form">
 <div class="form-group">
  <label for="name">名称</label>
  <input type="text" class="form-control" id="name"
   placeholder="请输入名称">
 </div>
</form></pre><p>효과는 다음과 같습니다.</p>
<p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현"></p>
<p>2. 가로형</p>
<p>가로형을 이해하기 전에 먼저 부트스트랩 네트워크 그리드 시스템을 이해합니다. </p>
<p>Bootstrap에는 기기나 뷰포트 크기가 증가함에 따라 최대 12열까지 적절하게 확장되는 반응형 모바일 우선 유동 그리드 시스템이 포함되어 있습니다. 여기에는 단순한 레이아웃 옵션을 위한 사전 정의된 클래스뿐만 아니라 보다 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인 클래스도 포함되어 있습니다. </p>
<p>반응형 그리드 시스템 화면 또는 뷰포트 크기가 증가함에 따라 시스템은 자동으로 최대 12개의 열로 나누어지며, 이는 너비를 백분율로 정의함을 의미합니다. </p>
<p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현" alt="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현"    style="max-width:90%"  style="max-width:90%"></p>
<p>가로형은 표시 수뿐만 아니라 형태 표현에서도 다른 형태와 다릅니다. 가로로 배치된 양식을 만들려면 다음 단계를 따르세요. </p>
<p>1단계: 상위 </p>
<form> 요소에 .form-horizontal 클래스를 추가합니다. <br>2단계: .form-group 클래스를 사용하여 <div>에 라벨과 컨트롤을 배치합니다. <br>3단계: 라벨에 클래스 .control-label을 추가합니다. <pre class="brush:js;toolbar:false"><form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">名字</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="firstname"
   placeholder="请输入名字">
  </div>
 </div>
</form></pre><p>효과는 다음과 같습니다. </p>
<p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현" alt="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현"    style="max-width:90%"  style="max-width:90%"></p>
<p>2. jQuery.validate 맞춤 확인 방법 </p>
<p>1. 🎜></p><pre class="brush:js;toolbar:false">// 手机号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
 var length = value.length;
 return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");</pre> <p></p>
<p></p>2. 사용자 지정 확인 호출 <p></p><pre class="brush:js;toolbar:false">rules : {
 phone : {
   required : true,
   isPhone : true
  }
}</pre> <p></p>
<p></p>3 , 사용자 지정 오류 디스플레이 <p></p>
<p><img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현" alt="Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현"    style="max-width:90%"  style="max-width:90%"></p>3.register.html<p></p><pre class="brush:html;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  
<link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
  
<script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/form.js" type="text/javascript"></script>
<script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#register-form{
 border: 1px solid rgb(197, 197, 197);
 width: 1000px;
 margin: auto;
 border-image: none;
 padding: 30px;
 border-radius: 3px;
}
</style>
  
</head>
<body>
 <h1 class="text-center text-danger">用户注册</h1><br>
 <form id="register-form" role="form" class="form-horizontal" method="get">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="firstname">用户名：</label>
   <div class="col-sm-5">
    <input class="form-control" id="firstname" name="firstname" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="password">密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="password" name="password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="confirm_password" name="confirm_password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="email">E-Mail：</label>
   <div class="col-sm-5">
    <input class="form-control" id="email" name="email" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="phone">手机号码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="phone" name="phone" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="tel">固定电话：</label>
   <div class="col-sm-5">
    <input class="form-control" id="tel" name="tel" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="address">家庭住址：</label>
   <div class="col-sm-5">
    <input class="form-control" id="address" name="address" />
   </div>
  </div>
  <div class="form-group">
   <div class="col-md-offset-2 col-md-10">
    <button type="submit" class="btn btn-primary btn-sm">注册</button>
    <button type="reset" class="btn btn-primary btn-sm">重置</button>
   </div>
  </div>
 </form>
</body>
</html></pre>4. form.js<p></p><pre class="brush:js;toolbar:false">$(document).ready(function() {
 // 手机号码验证
 jQuery.validator.addMethod("isPhone", function(value, element) {
  var length = value.length;
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
 }, "请正确填写您的手机号码。");
  
 // 电话号码验证
 jQuery.validator.addMethod("isTel", function(value, element) {
  var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位
  return this.optional(element) || (tel.test(value));
 }, "请正确填写您的电话号码。");
 // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。
 jQuery.validator.addMethod("isPwd", function(value, element) {
  var str = value;
  if (str.length < 6 || str.length > 18)
   return false;
  if (!/^[a-zA-Z]/.test(str))
   return false;
  if (!/[0-9]/.test(str))
   return fasle;
  return this.optional(element) || /[^A-Za-z0-9]/.test(str);
 }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");
  
 $("#register-form").validate({
  errorElement : &#39;span&#39;,
  errorClass : &#39;help-block&#39;,
  
  rules : {
   firstname : "required",
   email : {
    required : true,
    email : true
   },
   password : {
    required : true,
    isPwd : true
   },
   confirm_password : {
    required : true,
    isPwd : true,
    equalTo : "#password"
   },
   phone : {
    required : true,
    isPhone : true
   },
   tel : {
    isTel : true
   },
   address : {
    minlength : 10
   }
  },
  messages : {
   firstname : "请输入姓名",
   email : {
    required : "请输入Email地址",
    email : "请输入正确的email地址"
   },
   password : {
    required : "请输入密码",
    minlength : jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password : {
    required : "请输入确认密码",
    minlength : "确认密码不能小于5个字符",
    equalTo : "两次输入密码不一致不一致"
   },
   phone : {
    required : "请输入手机号码"
   },
   tel : {
    required : "请输入座机号码"
   },
   address : {
    required : "请输入家庭地址",
    minlength : jQuery.format("家庭地址不能少于{0}个字符")
   }
  },
  //自定义错误消息放到哪里
  errorPlacement : function(error, element) {
   element.next().remove();//删除显示图标
   element.after(&#39;<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>&#39;);
   element.closest(&#39;.form-group&#39;).append(error);//显示错误消息提示
  },
  //给未通过验证的元素进行处理
  highlight : function(element) {
   $(element).closest(&#39;.form-group&#39;).addClass(&#39;has-error has-feedback&#39;);
  },
  //验证通过的处理
  success : function(label) {
   var el=label.closest(&#39;.form-group&#39;).find("input");
   el.next().remove();//与errorPlacement相似
   el.after(&#39;<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>&#39;);
   label.closest(&#39;.form-group&#39;).removeClass(&#39;has-error&#39;).addClass("has-feedback has-success");
   label.remove();
  },
  
 });
});</pre>Bootstrap+jQuery입니다. 유효성 검사는 양식 유효성 검사 관련 지식을 구현합니다. 이를 숙지하고 자신만의 양식 유효성 검사를 설계할 수 있기를 바랍니다. <p></p>Bootstrap+jQuery.validate 기반의 양식 유효성 검사와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요! <p></p>
</div>
</form></select>

성명：

이전 기사：Vue.js每天必学之组件与组件间的通信다음 기사：jQuery插件fullPage.js实现全屏滚动效果

Bootstrap+jQuery.validate를 기반으로 양식 유효성 검사 구현

관련 기사