<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--這裏的順序不能亂,否則樣式會出不來-->
<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
</head>
<!--
前端:
1.把模板寫出來
2.樣式寫好
實現的功能:
1.在文本框中給一個默認值,請輸入用戶名等等;
2.在用戶輸入完後,文本自檢,如果格式不對,給個彈框提示
3.同理,所有的輸入框都應該有自檢的功能(在後期,在自檢的同時需要在數據庫進行匹配)
4.點擊立即提交後,文本清空,提交數據後臺
5.重置按鈕,點擊全部清空後,進行jquery部分界面重新刷新.
-->
<script type="text/javascript">
layui.use('form',function () {
var form=layui.form;
form.on('submit(formDemo)',function () {
return false;
});
});
$(function () {
//創建需要驗證的JQuery對象
var $user=$("#username");
var $pass = $("#password");
var $repass = $("#repassword");
var $phone = $("#telephone");
var $xiang = $("#xiang");
var $sub = $("#sub");
//定義幾個用戶存放boolean值的變量,對應相對的驗證
var user;
var phone;
var pass;
var xiang;
$sub.click(function () {
if(user&&phone&&pass&xiang){
layer.alert("提交成功",{
icon:6,
time:1000
});
}
else{
layer.alert("請完全正確後再提交",{
icon:5,
time:1000
});
}
})
//用戶名的失去焦點後,進行驗證
$user.blur(function () {
var res=/^[a-zA-Z][a-zA-Z0-9]{3,17}$/;//驗證用戶名
if(res.test($user.val())){
$(this).parent().next().html("格式正確");
user=true;
}else{
$(this).parent().next().html("格式錯誤");
user=false;
}
});
//密碼框的
$repass.blur(function () {
if($pass.val()==$repass.val()){
$(this).parent().next().html("格式正確");
pass=true;
}else{
$(this).parent().next().html("密碼不一致");
pass=false;
}
});
//手機號
$phone.blur(function() {
var res = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
if(res.test($phone.val())) {
$(this).parent().next().html("格式正確");
phone = true;
} else {
$(this).parent().next().html("格式錯誤");
phone = false;
}
});
//email的
$xiang.blur(function() {
var res = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
if(res.test($xiang.val())) {
$(this).parent().next().html("格式正確");
xiang = true;
} else {
$(this).parent().next().html("格式錯誤");
xiang = false;
}
});
})
</script>
<body>
<div id="zong" style=" margin:0 auto;border: 1px solid brown; width: 500px;">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用戶名:</label>
<div id="one" class="layui-input-inline">
<input type="text" id="username" name="username" required lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input">
</div>
<span class="layui-form-mid layui-word-aux"></span>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密碼:</label>
<div id="passw" class="layui-input-inline">
<input type="password" id="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
</div>
<span class="layui-form-mid layui-word-aux"></span>
</div>
<div class="layui-form-item">
<label class="layui-form-label">重複密碼:</label>
<div class="layui-input-inline">
<input type="password" id="repassword" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">關聯手機號:</label>
<div class="layui-input-inline">
<input id="telephone" type="text" name="title" required lay-verify="required" placeholder="請輸入手機號" autocomplete="off" class="layui-input">
</div>
<span class="layui-form-mid layui-word-aux"></span>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密保郵箱:</label>
<div class="layui-input-inline">
<input id="xiang" type="text" name="title" required lay-verify="required" placeholder="請輸入郵箱號" autocomplete="off" class="layui-input">
</div>
<span class="layui-form-mid layui-word-aux"></span>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button id="sub" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
</html>
Jquery方式實現表單驗證的註冊界面
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章