系列文章目录

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 表单验证的时机
- 1.2 表单选择器
- 1.3 常见表单验证的规则
二、正则表达式
- 2.1 常见的正则表达式
- 2.2 常用的正则表达式

前言

表单可以作为一个独立的模块来进行学习，在进行提交的时候经常会使用到表单的内容。

一、表单验证

减轻服务器的压力，数据在发送给服务器之前，需要先在客户端进行一些基本的验证。为了保证数据的完整性，并减服务器压力，还可以提升用户的体验。

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
})

个人认为，方式一和方式三比较相似，不同处在于设置在控件的不同标签位置上。

<!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="js/jquery-1.12.4.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 常见表单验证的规则

姓名不为空
年龄必须是数字，且有范围，整数
性别需选择
城市
爱好
。。。

<!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="js/jquery-1.12.4.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 常见的正则表达式

数字字符匹配。等效于 [0-9]。

非数字字符匹配。等效于 [^0-9]。

换页符匹配。等效于 \x0c 和 \cL。

换行符匹配。等效于 \x0a 和 \cJ。

匹配一个回车符。等效于 \x0d 和 \cM。

匹配任何空白字符，包括空格、制表符、换页符等。与 [ \f\n\r\t\v] 等效。

匹配任何非空白字符。与 [^ \f\n\r\t\v] 等效。

制表符匹配。与 \x09 和 \cI 等效。

垂直制表符匹配。与 \x0b 和 \cK 等效。

匹配任何字类字符，包括下划线。与"[A-Za-z0-9_]"等效。

与任何非单词字符匹配。与"[^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”))

Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式相关推荐

Web后端学习笔记 Flask（8） WTForms 表单验证，文件上传
Flask-WTF是简化了WTForms操作的一个第三方库.WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板.同时还包含一些其他的功能.例如CSRF保护,文件上传等功能,安装fl ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
jQuery的表单验证
jQuery的表单验证直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式

系列文章目录

文章目录

前言

一、表单验证

1.1 表单验证的时机

1.2 表单选择器

1.3 常见表单验证的规则

二、正则表达式

2.1 常见的正则表达式

2.2 常用的正则表达式

Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式相关推荐

最新文章

热门文章

Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式

系列文章目录

文章目录

前言

一、表单验证

1.1 表单验证的时机

1.2 表单选择器

1.3 常见表单验证的规则

二、正则表达式

2.1 常见的正则表达式

2.2 常用的正则表达式

Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式相关推荐

最新文章

热门文章

Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式

Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式相关推荐