标签：
jQuery表单验证
dom事件绑定
jquery时间绑定
$.each return值的判断
jquery扩展方法
前段插件
jDango文本框架
1、dom方法提交表单，并验证：
<!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{
display: inline-block;
position: absolute;
background-color: #D5023D;
color: white;
top: 20px;
left:0;
width: 203px;
}
</style>
</head>
<body>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名">
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="username" label="密码">
<!--<span>密码不能为空</span>-->
<!--预先做测试使用，以后的效果就是让javascript往这里添加这个标签-->
</div >
<input type="submit" value="提交" onclick=" return CheckText();"> <!--人为绑定一个检查事件-->
</form>
<script src="js/jquery-3.1.0.js"></script>
<script>
function CheckText() {
$(‘form span‘).remove();
var flag = true;
$(‘form .c1‘).each(function () {
//找到form标签中需要验证的标签
var val = $(this).val(); //获取input中的val
if(val.length<=0){
var label = $(this).attr("label");
var tag = document.createElement("span");
tag.innerText = label+"不能为空";
$(this).after(tag); //把标签添加到这个标签的后面
flag = false; //判断当前这个标签的内容如果是空就把flag制成false，不为空就不管了，让他是true，
}
});
return flag; //最后这个函数就可以return这个flag了，如果是true就可以提交表单，如果时候false就不提交
}
</script>
</body>
</html>
2、jQuery方法提交表单，验证方法：
这种绑定事件的好处在于在阅览器里面看不到是谁绑定的这个事件。只有js知道谁绑定了时间
<!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{
display: inline-block;
position: absolute;
background-color: #D5023D;
color: white;
top: 20px;
left:0;
width: 203px;
}
</style>
</head>
<body>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名">
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="username" label="密码">
<!--<span>密码不能为空</span>-->
</div >
<input type="submit" value="提交">
</form>
<script src="js/jquery-3.1.0.js"></script>
<script>
//绑定时机：1、需要form这个标签创建完才能绑定
// 2、如果有大量内容需要加载，那我们就在框架加载完绑定会快很多
$(function () { //所以这里就使用了function这个自执行函数，在框架加载完就执行里面的绑定的函数
//当页面框架加载完后，自动执行
BindCheckValid();
});
function BindCheckValid() {
$(‘form input:submit‘).click(function () {
$(‘form span‘).remove();
var flag = true;
$(‘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 false; //如果有一个是false则退出整个循环，也就是只检测一个，下面的就不再检测了。效果：只显示当前不合法的报错
}
});
return flag; //这里return false 就表示不再提交了，这里和dom "return BindCheckValid()"的reutrn false 是一个道理
})
}
</script>
</body>
</html>
3、知识点：
each循环
<script>
$.each([11,22,33,44], function (k, v) {
if(k==2){
return; //这里的reuturn只是相当与return了当前这个function匿名函数，这个each的循环没有结束
// return false; //我们如果想结束整个循环，需要写上return false ，each会判断你的reuturn，如果等于false就结束当前循环
}
console.log(v)
})
</script>
return:相当于continue。
return false:相当于break。
python_way day17 jQuery表单验证，插件，文本框架
标签：
原文地址：http://www.cnblogs.com/python-way/p/5822497.html
