最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JQuery製作表單驗證Vaildation

XAMPP下载 admin 685浏览 0评论
 使用Bootstrap框架,拉出HTML表單的皮
<div class=”container”>
<form>
<h2>Contact Us</h2>
<div class=”row”>
<div class=”col-md-6″>
<div class=”form-group”>
<label for=”first”>First Name</label>
<input type=”text” class=”form-control required” placeholder=”” id=”first”>
</div>
</div>
<div class=”col-md-6″>
<div class=”form-group”>
<label for=”last”>Last Name</label>
<input type=”text” class=”form-control required” placeholder=”” id=”last”>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-6″>
<div class=”form-group”>
<label for=”phone”>Phone Number</label>
<input type=”tel” class=”form-control required” id=”phone” placeholder=”phone”>
</div>
</div>
<div class=”col-md-6″>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”email” class=”form-control required” id=”email” placeholder=”email”>
</div>
</div>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>
</div>
透過val()方法取得value屬性值,用條件判斷是否為空值
$(‘.required’).on(‘keydown keyup keypress change focus blur’,function(){
if($(this).val() == ”){
$(this).css({backgroundColor: ‘#ffcccc’});
}else{
$(this).css({backgroundColor: ‘#fff’});
}
}).change();
範例網址
https://codepen.io/amanda328/pen/dqXGZB?editors=0010

以上為個人學習紀錄
參考書籍為外掛OUT!JQuery高手精技

转载请注明:XAMPP中文组官网 » JQuery製作表單驗證Vaildation

您必须 登录 才能发表评论!