系列文章目录
Web前端 学习知识点总结（一）HTML基本标签.
Web前端 学习知识点总结（二）之Form和Css选择器.
Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结（四）之display 和 float.
Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端 学习知识点总结（六）定位position.
Web前端 学习知识点总结（七）Css3动画animation.
Web前端 学习知识点总结（八）JavaScript的常用基础.
Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器.
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作.
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结（十三）学生管理系统案例.
前言
表单可以作为一个独立的模块来进行学习，在进行提交的时候经常会使用到表单的内容。
一、表单验证
减轻服务器的压力，数据在发送给服务器之前，需要先在客户端进行一些基本的验证。为了保证数据的完整性，并减服务器压力，还可以提升用户的体验。
1.1 表单验证的时机
表单在提交的时候进行验证，为了证明，使用return false 来提前拦截。
return true 表示可以通过验证,return false 表示不能通过。
-
方式一 提交按钮验证
$("#subbtn").click(function(){
return false
}) -
方式二 双return验证
在input type=submit中的onclick或者onsubmit中要加"return +fn（）"
fn是需要进行验证的函数 -
方式三 form验证
$("#regForm").submit(function(){
return false
})
个人认为，方式一和方式三比较相似，不同处在于设置在控件的不同标签位置上。
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="index.html" id="regForm">
<input type="submit" value="提交" id="subbtn" />
</form>
</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 前两种方法是对于input ,第三种是在form上
// 方法一 sbumit 按钮的click
//return true 表示可以通过验证,return false 表示不能通过
// $("#subbtn").click(function(){
// return false
// })
//方法二 onsubmit或者onclick("return +函数")
//双return
//在input中加 οnclick="return re()"
//function re(){
// return false
//}
//return ture 验证通过 .表单可以提交给服务器，return false,就不提交
//方式三
$("#regForm").submit(function(){
return false
})
</script>
1.2 表单选择器
可以选择input，select，textarea 可以选择表单内的全部元素
使用$(":input")
相当于 input[type=text],以下元素同理
-
:text
-
:password
-
:radio
-
:checkbox
-
:file
-
:hidden
-
:image
-
:submit
-
:buttom
属性过滤选择器
可以选择按钮中是否允许选择的属性
:enable
:disable
获取选中的具体的一项
:checked
:selected
1.3 常见表单验证的规则
姓名不为空
年龄必须是数字，且有范围，整数
性别需选择
城市
爱好
。。。
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tip{
display: none;
}
</style>
</head>
<body>
<form action="index.html" id="regForm">
<p>
姓名<input type="text" name="username" onfocus="" onblur="checkname()" placeholder="请输入4-16位字符"/>
<span class="tip" id="nameno">姓名</span>
</p>
<p>
年龄<input type="text" name="age"/>
</p>
<p>
性别:<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女
</p>
<p>
爱好：<input type="checkbox" name="hob" value="sw"/>游泳
<input type="checkbox" name="hob" value="fit"/>健身
</p>
<p>
省份:
<select name="province">
<option value="-1">请选择</option>
<option value="1001">陕西</option>
<option value="1002">四川</option>
<option value="1003">宁夏</option>
<option value="1004">北京</option>
</select>
</p>
<p>
邮箱：<input type="text" name="email" id="email" />
</p>
<p>
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
<script src="html" title=js>js/html" title=jquery>jquery-1.12.4.html" title=js>js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 对姓名的验证
function checkname(){
var name=$(":text[name='username']").val()
// trim()去空格 只能去掉前后的空格 中间的空格是正常的现象
if($(":text[name='username']").val().trim()==""){
// 获取焦点
$(":text[name='username']").focus();
$("#nameno").html("请填写").show()
return false;
}else if(name.length<4||name.length>16){
// 选中
$(":text[name='username']").select();
$("#nameno").html("请填写4~16位字符").show()
return false;
}else{
// 对一些特殊要求 .split("")不加字符 全部分割
$("#nameno").hide()
return true;
}
}
//表单验证
$("#regForm").submit(function(){
if(!checkname())return false
// console.log($(":text[name='username']").val())
var age=$(":text[name='age']").val()
if (age=="") {
alert("请填写年龄");
return false;
} else if(isNaN(age)){
alert("必须是数字");
return false;
}else if(parseInt(age)<16){
alert("年龄必须在16岁以上");
return false;
}
// 如果出现indexOf是返回的位置
else if(age.indexOf(".")>-1){
alert("年龄必须是整数");
return false;
}
if($(":radio[name='sex']:checked").length==0){
alert("请选择性别");
return false;
}
// 爱好验证
if($(":checkbox[name='hob']:checked").length==0){
alert("请选择性别");
return false;
}
// 省份验证
if ($(":input[name='province']").val()=="-1") {
alert("庆幸选择");
return false;
}
// 邮箱验证
var email =$("#email").val();
if (email="") {
alert("请选择");
return false;
// 如果没有
} else if(email.indexOf("@")<=0){
alert("请选择@");
return false;
}else if(email.indexOf(".")<=email.indexOf("@")){
alert("格式不对");
return false;
}
return true;
})
</script>
注：表单验证提示效果
focus() 当提交的时候，选择有该命令的
select() 当提交的时候，选择有该命令的
区别在于 前者是光标会在最后出现，后者是整体选中。
onblur 事件会在对象失去焦点时发生。
如：没有onblur时，可以选择其他控件。反之，就必须要验证通过才能进行下一项。
二、正则表达式
2.1 常见的正则表达式
\d
数字字符匹配。等效于 [0-9]。
\D
非数字字符匹配。等效于 [^0-9]。
\f
换页符匹配。等效于 \x0c 和 \cL。
\n
换行符匹配。等效于 \x0a 和 \cJ。
\r
匹配一个回车符。等效于 \x0d 和 \cM。
\s
匹配任何空白字符，包括空格、制表符、换页符等。与 [ \f\n\r\t\v] 等效。
\S
匹配任何非空白字符。与 [^ \f\n\r\t\v] 等效。
\t
制表符匹配。与 \x09 和 \cI 等效。
\v
垂直制表符匹配。与 \x0b 和 \cK 等效。
\w
匹配任何字类字符，包括下划线。与"[A-Za-z0-9_]"等效。
\W
与任何非单词字符匹配。与"[^A-Za-z0-9_]"等效。
2.2 常用的正则表达式
以后用到会进行补充
-
验证名字
/^1[a-zA-Z]([a-zA-Z]){3,15}$/ -
手机号码
/^1[3578]\d{9}$/ /^(13|15|17|18)\d{9}$/
一般使用r.test进行表单内的测试
console.log(r.test(“13222222222”))
-
电子邮件
/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/w+ 有一个或者多个字符
console.log(r.test(“22251@qq.co”))
