表单校验
1. 掌握表单验证的实现流程
1.1 表单验证的作用
- 保证用户输入的内容符合我们项目的要求
- 降低服务器的压力
- 提升用户的体验
1.2 表单验证的实现思路
- 程序的入口:事件(表单提交事件
onsubmit
,失去焦点事件onblur
,普通按钮的点击事件onclick
,获取焦点事件onfocus
,键盘录入事件onkeydown
) - 程序主体:
- 获取表单数据 (表单的内容是存储在一个
value
属性中的) - 利用字符串等相关方法进行数据验证
- 通过alert()或者其他的提示方式进行提醒(一般提醒会放在表单元素的右侧或者下侧)
- 如果是提交事件注意应该将提交拦截!
- 获取表单数据 (表单的内容是存储在一个
<body>
<form action="success.html" method="GET">
<p>
帐号: <input type="text" id="" name="username" value="" />
</p>
<p>
密码: <input type="password" name="password" />
</p>
<input type="submit" value="提交"/>
</form>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.绑定事件
// 提交事件是属于表单form的一个事件
$("form").submit(function(){
// alert(1);
// 2.获取数据
var username = $("input[name=username]").val();
// alert(username);
// 3.利用字符串等相关方法进行验证
if(username == null || username == ""){
alert("用户名不能为空!");
// 默认返回true 表示提交表单
return false;
}
return true;
});
</script>
</body>
1.3 掌握字符串的常用表单验证方法
- trim() 去除两侧空格
- indexOf() 获取指定字符的索引
- lastIndexOf() 获取指定字符的最后的索引
- length 属性 获取字符串的长度
- charAt() 获取指定索引的字符
2. [了解]表单过滤选择器
3. 掌握正则表达式的基本使用
会写基本的正则表达式
会看基本的正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。使用正则表达式可以用简洁的代码搞定复杂且严谨的验证。
语法:
// 普通方式定义
var reg = /正则的表达式/[附加参数];
// 通过对象的构造来定义
var reg = new RegExp(正则表达式[,附加参数]);
表达式分类和组成:复合模式和简单模式可以混用
-
简单模式的表达式
var reg = /abc/;
-
复合模式的表达式
var reg = /[a-z]{6,16}/;
它可以匹配上6-16位的小a-小z-
元字符 例如:[a-z] \d \s \w
-
限定符 例如:{6,16}
-
附加参数:
g:global 全局 它对不同方法产生不同的影响
- 字符串的replace方法 如果正则不加g则表示只替换一次 如果加了g表示全局匹配替换
i:ignorecase 忽略大小写
m:multiline 多行匹配 m往往要和g搭配使用
常用正则相关方法
正则对象的方法:
- exec() 查找匹配的字符串 并返回其位置
- test() 验证字符串是否和正则匹配
字符串的方法:
-
match() 查找一个或多个与正则匹配的内容
-
search() 查找与正则匹配的内容
search()方法不执行全局匹配,它将忽略标志 g,并且总是从字符串的开始进行检索,这意味着它总是返回调用者的第一个匹配的位置。如果找不到返回-1。
-
replace() 替换与正则匹配的内容
-
split() 根据正则进行切割字符串 切割为数组
以后正则表达式可以前往:
4. 掌握H5的表单验证特性
4.1 H5的表单新属性
-
required 表示此表单为必填项
-
placeholder 它会在表单内展示一个提示内容
-
pattern 和正则结合使用
-
max 最大值
-
min 最小值
-
maxLength
-
type=“number”
-
type=“email”
-
…
4.2 H5提供出来的DOM验证操作
var validateState(验证状态对象) = DOM对象.validity;
validateState.valueMissing
validateState.typeMismatch
我们可以借助下方的这些属性验证当前表单元素的验证状态,根据此状态可以去进行自定义操作。(自定义提示信息)
DOM对象.setCustomValidity(自定义提示信息);
// DOM对象属性和函数
$("input[type=submit]").click(function(){
// alert(1);
var emailEle = $("input[name=email]")[0];
// 通过validity属性验证是否合法
if(emailEle.validity.valueMissing){
emailEle.setCustomValidity("邮箱不能为空!");
}else if(emailEle.validity.patternMismatch){
emailEle.setCustomValidity("邮箱格式非法!");
}else{
emailEle.setCustomValidity("");
}
});
5. 了解一些前端的常见插件[不要重复造轮子]
validate:
highcharts
echarts:https://echarts.baidu.com/examples/index.html?theme=light
bootstrap:https://www.bootcss.com/
…