Python菜鸟之路：通过案例学习JQuery

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

案例一：通过DOM绑定，实现基本的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证: DOM实现</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
</div>
<input type="submit" value="提交" onclick="return CheckValid();" /> 
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
var flag = true; function CheckValid() {
$('form .item span').remove();
$('form .c1').each(function () {
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span')
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
}
});
return flag;
}
</script>
</body>
</html>

DOM实现表单验证

案例二：通过JQuery事件绑定，实现基本的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证:JS绑定事件</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
</div>
<input type="submit" value="提交"/>
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
BindCheckValid();
});
// 页面加载完之后，进行绑定事件
function BindCheckValid() {
$('form :submit').click(function () {
var flag = true;
$('form .item span').remove();
$('form .c1').each(function () {
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span')
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
}
});
return flag;
});
}
</script>
</body>
</html>

JS实现表单验证

案例三：通过JQuery扩展方法，实现基本的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body> <div>
<form id="form1">
<div class="item">
<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
</div>
<div class="item">
<input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
</div>
<input type="submit" value="提交" />
</form> </div> <script src="jquery-1.12.4.js"></script>
<script src="commons.js"></script>
<script>
$(function(){
$.valid('#form1');
}); </script>
</body>
</html>

HTML部分

/**
* Created by ACER on 2016/8/28.
*/
(function(jq){ function ErrorMessage(inp,message){
var tag = document.createElement('span');
tag.innerText = message;
inp.after(tag);
} jq.extend({
valid:function(form){
// #form1 $('#form1')
jq(form).find(':submit').click(function(){ jq(form).find('.item span').remove(); var flag = true;
jq(form).find(':text,:password').each(function(){ var require = $(this).attr('require');
if(require){
var val = $(this).val(); if(val.length<=0){
var label = $(this).attr('label');
ErrorMessage($(this),label + "不能为空");
flag = false;
return false;
} var minLen = $(this).attr('min-len');
if(minLen){
var minLenInt = parseInt(minLen);
if(val.length<minLenInt){
var label = $(this).attr('label');
ErrorMessage($(this),label + "长度最小为"+ minLen);
flag = false;
return false;
}
//json.stringify()
//JSON.parse()
} var phone = $(this).attr('phone');
if(phone){
// 用户输入内容是否是手机格式
var phoneReg = /^1[3|5|8]\d{9}$/;
if(!phoneReg.test(val)){
var label = $(this).attr('label');
ErrorMessage($(this),label + "格式错误");
flag = false;
return false;
}
} // 1、html自定义标签属性
// 增加验证规则+错误提示 }
// 每一个元素执行次匿名函数
// this
//console.log(this,$(this));
/*
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
return false;
}
*/
}); return flag;
});
}
});
})(jQuery);