表单验证
Posted Ivyvivid
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证相关的知识，希望对你有一定的参考价值。
==================================表单验证========================================
表单验证可以在客户端和服务器端
1.客户端
直接在已下载到本地的页面中调用脚本进行验证
检查用户输入的无效或错误数据
检查遗漏的必选项
2.服务器端
将页面提交到服务器处理，服务器的另一个包含表单的页面先执行对表单的验证，然后再返回响应结果到客户端
缺点：每一次验证都要经过服务器，时间长，增加服务器的负担
实现步骤：
1.获取表单元素的值
2.根据业务规则，使用JS中的一下方法对获取的数据进行判断
3.表单有一个事件onsubmit,在提交表单前调用。在提交表单时触发onsubmit事件，对获取的数据进行验证
验证方式：
1.String对象的属性和方法
a.属性 length（包括空格）
b.方法
toLowerCase
toUpperCase
charAt(index) 返回指定位置的字符
indexOf(字符串，index) 返回字符串的位置
substring(index1,index2) 包括index1，不包括index2
==================================正则表达式========================================
2.正则表达式
/.../ 一个模块的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的开始
\s 任何空白字符
\S 任何非空白字符
\d [0-9]
\D 除[0-9]外
\w [A-Za-z0-9]
. 除换行符之外的任意字符
{n} 匹配前一项n次
{n,} 匹配前一项n次，或多次
{n,m} 匹配前一项n~m次
* {0，}
+ {1，}
? 前一项可选，{0,1}
1.普通方式
var reg = /表达式/附加参数
附加参数：（复合，不加参数）
g：全局匹配
i：不区分大小写匹配
m：多行匹配
2.构造函数方式
var reg = new RegExp(表达式，附加参数);
【注意：表达式是正则表达式，可以省略附加参数。】
JS除了支持RegExp对象的正则表达式外，还支持String对象的正则表达式
String对象的方法
match() 返回指定的值
search() 返回第一个匹配的位置，如果没有，就返回-1
replace() 字符串对象.replace(RegExp对象或字符串，"替换的字符串") 如果没设置全文搜索，就替换第一个
split() 字符串对象.split(分隔符，n) 如果不设置n，就返回所有的元素数组
范例：表单的事件触发
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .error { 8 border: 3px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 14 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 15 <form > 16 <div> 17 <label for="name">用户名：</label> 18 <input type="text" name="name" id="name" regExp="^\w{6,12}$" errorMsg="用户名不能为空，并且长度..." placeholder="QQ邮箱/手机号" /><span></span> 19 </div> 20 <div> 21 <label for="passWord">密码：</label> 22 <input type="password" name="passWord" id="passWord" regExp="^\w{6,12}$" errorMsg="密码不能为空，并且长度..." placeholder="请输入密码" /><span></span> 23 </div> 24 <div> 25 <input type="button" value="提交" /> 26 </div> 27 </form> 28 <script type="text/javascript"> 29 $(function(){ 30 $(‘:input[regExp][errorMsg]‘).on(‘valid‘,function(){ 31 var regExp = new RegExp($(this).attr(‘regExp‘)); 32 var errorMsg = $(this).attr(‘errorMsg‘); 33 var result = $(this).val().match(regExp); 34 console.log(result); 35 if (null == result) { 36 $(this).addClass(‘error‘); 37 $(this).next().html(errorMsg); 38 } else { 39 $(this).removeClass(‘error‘); 40 $(this).next().html(‘‘); 41 } 42 }); 43 44 $(‘input[type="button"]‘).click(function() { 45 $(‘:input‘).trigger(‘valid‘); 46 if($(this).closest(‘form‘).find(‘.error‘).length == 0){ 47 $(‘form‘).submit(); 48 } 49 }); 50 }); 51 </script> 52 </body> 53 </html>
以上是关于表单验证的主要内容，如果未能解决你的问题，请参考以下文章
原生JavaScript判断是否为邮箱危险字符验证长度验证网址验证小数整数浮点数等常用的验证
ajaxFileUpload上传带参数文件及JS验证文件大小
SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段