<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>表单验证</title>
<style type="text/css">
body {
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
font-size: 14px;
}
/*表单尺寸*/
form {
width: 400px;
margin: 50px auto;
}
/*表单模块距离*/
.form_child {
margin: 10px;
}
/*输入框*/
input {
width: 230px;
padding: 5px;
}
/*按钮*/
.formBtn {
width: 100px;
margin: 0 auto;
margin-left: 35px;
}
/*输入框前文字文字*/
label {
margin-right: 5px;
}
/*按钮前标签*/
.btnLabel {
margin-right: 36px;
}
/*提示内容*/
.hint {
font-size: 12px;
color: #999;
margin-left: 10px;
margin-top: 10px;
height: 20px;
}
.hint p,
span,
em {
display: none;
margin: 0;
}
.hint em {
font-style: normal;
}
</style>
</head>
<body>
<form id="register_form" action="" method="get">
<fieldset>
<legend>用户注册表单</legend>
<div class="form_child">
<label for="username">用 户 名:</label><input id="username" class="input_bar" type="text" name="username" placeholder="用户名">
<div class="hint">
<p>✱ <span>字母开头,长度5-16字节,允许字母数字下划线</span><em>格式不符合规范</em></p>
</div>
</div>
<div class="form_child">
<label for="pswd">密 码:</label><input id="pswd" class="input_bar" type="password" name="pswd" placeholder="密码">
<div class="hint">
<p>✱ <span>字母开头,长度6~18之间,允许字母、数字和下划线</span><em>格式不符合规范</em></p>
</div>
</div>
<div class="form_child">
<label for="repswd">确认密码:</label><input id="repswd" class="input_bar" type="password" name="pswd" placeholder="确认密码">
<div class="hint">
<p>✱ <span>请再次输入密码</span> <em>密码不一致</em></p>
</div>
</div>
<div class="form_child">
<label for="mEmail">邮 箱:</label><input id="mEmail" class="input_bar" type="email" name="mEmail" placeholder="邮箱">
<div class="hint">
<p>✱ <span>验证完成后你可以使用该邮箱登录和找回密码</span><em>格式不符合规范</em></p>
</div>
</div>
<div class="form_child">
<label for="mTel">电 话:</label><input id="mTel" class="input_bar" type="tel" name="mTel" placeholder="电话">
<div class="hint">
<p>✱ <span>验证完成后你可以使用该手机登录和找回密码</span><em>格式不符合规范</em></p>
</div>
</div>
<div class="form_child">
<label class="btnLabel" for=""></label><input id="submit_btn" class="formBtn" type="submit"><input class="formBtn" type="reset">
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var username = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; //用户名
var pswd = /^[a-zA-Z]\w{5,17}$/; //密码
var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮箱
var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0,6,7,8]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
var isExist; //检测输入是否合法,用来判断是否提交
// 如果输入框为空阻止提交
if ($('.input_bar', '#register_form').val() == '') {
isExist = false;
}
// 输入框焦点事件
$('#register_form').on({
focus: function() {
// 获取焦点
$(this).siblings('.hint').find('p').css('color', '#999');
$(this).siblings('.hint').find('em').hide();
$(this).siblings('.hint').find('p,span').show();
},
blur: function() {
// 失去焦点,通过id判断
switch ($(this).attr('id')) {
case 'username':
if (!username.test($(this).val())) {
isExist = false;
} else {
isExist = true;
}
break;
case 'pswd':
if (!pswd.test($(this).val())) {
isExist = false;
} else {
isExist = true;
}
break;
case 'repswd':
if ($('#repswd').val() != $('#pswd').val()) {
isExist = false;
} else {
isExist = true;
}
break;
case 'mEmail':
if (!email.test($(this).val())) {
isExist = false;
} else {
isExist = true;
}
break;
case 'mTel':
if (!tel.test($(this).val())) {
isExist = false;
} else {
isExist = true;
}
break;
default:
console.log(isExist);
break;
}
// 失去焦点如果是空或者正确的样式
if ($(this).val() == '' || isExist == true) {
$(this).siblings('.hint').find('p').hide();
} else if (isExist == false) {
$(this).siblings('.hint').find('p').css('color', '#ff0000');
$(this).siblings('.hint').find('span').hide();
$(this).siblings('.hint').find('p,em').show();
}
}
}, '.input_bar');
/*提交前判断*/
$('#submit_btn').on('click', function() {
if (isExist == false) {
return false;
}
})
});
</script>
</body>
</html>
jq表单验证
最新推荐文章于 2024-03-14 07:00:00 发布