表单验证和正则表达式(一)

首先我们要明白为什么要表单验证?

他的目的就是为了减轻服务器的压力及保证输入的数据符合要求

来看下我们常用的表单验证,举例让你有个浅浅的了解

日期格式

例如：年月日不能为空，月必须在1到12之间，日必须在1到31之间

表单元素是否为空

用户名和密码

例如：用户名不能少于3个字符；

密码至少6位；都不能为空。

mail地址

例如：不能为空，必须包含@和.

身份证号码

必须满足身份证号的格式

表单验证的思路

当输入的表单数据不符合要求时，如何编写脚本来进行提示？

获得表单元素值

使用JavaScript的一些方法对数据进行判断

当表单提交时，触发事件，对获取的数据进行验证

我们来做个练习,实现一下验证表单内容

首先使用String 对象验证邮箱, 不能为空，格式正确

其次文本框内容的验证, 密码不能为空，不少于6个字符，姓名不能为空，不能有数字

使用String 对象验证邮箱

实现思路

1.使用val( )方法获取文本框的值

2.使用indexOf( ) 来判断字符串是否包含 “ @ ” 和 “ . ”

3.使用方法submit( )提交表单

4.根据返回值是true还是false来决定是否提交表单

针对以上我们可以使用如下代码进行演练

5.字符串验证

拆分一下我们来具体了解一下:

非空验证, 检测EmailText是否为空

if ( EmailText == "") {

alert("Email不能为空");

return false;

}

字符串查找,单独分析一下,做个小案例

indexOf()：查找某个指定的字符串值在字符串中首次出现的位置

var str="this is js";

var selectFirst=str.indexOf("js"); 返回8

这个第一个值使我们要寻找的值,第二个值使我们返回的下标位置,12这个下标不存在,所以返回-1

var selectSecond=str.indexOf("js",12); 返回-1

验证登录页面

form.οnsubmit=function(){

var mail= EmailText .value;

if(mail==""){

alert("Email 不能为空");

return false;

}

if (mail.indexOf("@") == -1) {

alert("Email 格式不正确\n必须包含@");

return false;

}

if (mail.indexOf(".") == -1) {

alert("Email 格式不正确\n必须包含.");

return false;

}

return true;

}

文本框内容的验证

实现思路

使用String对象的length属性验证密码的长度

验证两次输入密码是否一致

使用length属性获取文本长度，然后使用for循环和substring( )方法依次截断单个字符

字符串验证

长度验证

length 属性可以获取字符串长度

if(pwd.length<6){

alert(" 密码必须等于或大于6个字符");

return false;

}

判断字符串是否有数字

使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字

for (var i = 0; i < user.length; i++) {

/*截取单个字符*/

var j = user.substring(i, i + 1);

if (isNaN(j) == false) {

// isNaN(j) == false注意这个意思就是他是一个数字,如果为ture就是不是一个数字,我们也可以利用取反来使用

alert(" 姓名中不能包含数字");

return false;

}

注册页面的验证

form.οnsubmit=function(){

var pwd=getPwd.value;

if (pwd == "") {

alert(" 密码不能为空");

return false;

}

if (pwd.length < 6) {

alert(" 密码必须等于或大于6个字符");

return false;

}

var repwd=pwdAgain.value;

if (pwd != repwd) {

alert(" 两次输入的密码不一致");

return false;

}

var user=userName.value;

if (user == "") {

alert(" 姓名不能为空");

return false;

}

for (var i = 0; i < user.length; i++) {

var j = user.substring(i, i + 1);

if (isNaN(j) == false) {

alert(" 姓名中不能包含数字");

return false;

}

return true;

}

练习1：

电子邮箱不能为空

电子邮箱中必须包含符号 “ @ ” 和 “ . ”

当电子邮箱输入框中的内容正确时，页面跳转到注册成功页面（success.html）

校验提示特效

文本输入提示特效

实现思路

把错误信息显示在<span>中，然后使用html()方法，设置<span>和</span>之间的内容

编写脚本验证函数

鼠标失去焦点时（blur事件）调用验证函数

请输入用户名

</form>

var input = document.querySelector("input");

var form = document.querySelector("form");

form.onsubmit = function () {

if (input.value.length < 6) {

alert("邮箱必需大于或等于6个字符")

return false;

}

if (input.value == "") {

alert("邮箱不能为空")

return false;

}

if (input.value.indexOf("@") == -1 || input.value.indexOf(".") == -1) {

alert("格式不正确")

return false;

}

</script>

练习2：

名字和姓氏均不能为空，不能有数字

密码不能少于6位，电子邮箱不能为空，格式正确

实现文本框提示特效

请输入用户名:

<br>

请输入密码:

<br>

请输入邮箱:

<br>

</form>

var input1 = document.querySelector(".input1");

var input2 = document.querySelector(".input2");

var input3 = document.querySelector(".input3");

var span1 = document.querySelector(".span1");

var span2 = document.querySelector(".span2");

var span3 = document.querySelector(".span3");

var form = document.querySelector("form");

input1.onblur = in1;

input2.onblur = in2;

input3.onblur = in3;

function in1() {

if (input1.value == "") {

span1.innerHTML = "姓名不能为空"

span1.style.color = "red"

return false;

}

for (var i = 0; i < input1.value.length; i++) {

var j = input1.value.substring(i, i + 1)

if (isNaN(j) == false) {

span1.innerHTML = "姓名不能有数字"

span1.style.color = "red"

}

span1.innerHTML = "输入正确"

span1.style.color = "green"

return true;

}

function in2() {

console.log(input2.value)

if (input2.value == "") {

span2.innerHTML = "密码不能为空"

span2.style.color = "red"

return false;

}

if (input2.value.length < 6) {

span2.innerHTML = "密码不能少于6位数"

span2.style.color = "red"

return false;

}

span2.innerHTML = "输入正确"

span2.style.color = "green"

return true;

}

function in3() {

if (input3.value == "") {

span3.innerHTML = "邮箱不能为空"

span3.style.color = "red"

return false;

}

if ((input3.value.indexOf("@") == -1 || input3.value.indexOf(".") == -1)) {

span3.innerHTML = "邮箱格式不正确"

span3.style.color = "red"

return false;

}

span3.innerHTML = "输入正确"

span3.style.color = "green"

return true;

}

form.onsubmit = function () {

if (in1() == false || in2() == false || in3() == false) {

alert("提交失败")

return false;

}

return true;

}

正则表达式

为什么需要正则表达式

简洁的代码

严谨的验证文本框中的内容

正则表达式语法

构造函数：var reg=new RegExp(pattern,modifiers);

Pattern 表达式

Modifiers 修饰符

字面量：var reg=/pattern/modifiers;

修饰符

i 执行对大小写不敏感的匹配

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）,一般配合match使用

常用的表达式

正则表达式方法

检测一个字符串是否与正则相匹配

reg.test(string) =》返回值为布尔值 true匹配，false不匹配

reg.exec(string) =》匹配成功返回数组，并确定其位置，否则返回null

var str=" efg ";

var reg=/[a-z]/; 或者 var reg=/[A-Z]/;

console.log(reg.test(str));

console.log(reg.exec(str));

书写的两种方式:

表达式描述

[a-z] 查找任何从小写 a 到小写 z 的字符

[A-Z] 查找任何从大写 A 到大写 Z 的字符

[0-9] 查找任何从 0 至 9 的数字

[abc] 查找括号内的任意一个字符

[^abc] 查找除了括号内的任意字符

以上的表达式,只要有一个满足条件的就为ture

常用的元字符（特殊字符）

字符描述

\w 匹配数字、字母(包含大小写)、下划线

\W 匹配非数字、字母、下划线

\d 匹配数字

\D 匹配非数字

\s 匹配空白字符（空格、换行）

\S 匹配非空白字符

\n 匹配换行符

注意：这些元字符在使用时需注意区分大小写

表单验证和正则表达式(一)相关推荐

JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
HTML(六)——表单验证、正则表达式、事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
最常用的15个前端表单验证JS正则表达式
2019独角兽企业重金招聘Python工程师标准>>> 在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包 ...
html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码
搜索热词 JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 function regIsDigit(fData) { var reg = new RegExp(& ...
javascript表单验证及正则表达式
1.表单验证的场景与意义 1.1.降低服务器压力拦截不合格数据,避免直接提交到服务器,可以显著降低服务器开销 1.2.提升用户体验早期的互联网,表单项非常多,注册账号需要填写20+字段.而其中有一 ...
表单验证与正则表达式
问题:一个注册界面,包括用户名.密码.确认密码.邮箱,对其进行表单验证,要求: 各项都不能为空, 用户名由字母数字下划线组成,不能使用数字开头, 密码长度必须大于6位,但不能超过15位, 密码和确认密 ...
html正则表达式表单验证,js正则表达式验证表单【完整版】
效果图: 图(1)初始图图(2)填入信息校验代码如下: 完整验证表单 *{margin: 0;padding: 0;list-style:none;} body{background:#ccc;} ...
js表单验证（常用的正则表达式）
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
javascript:正则表达式、一个表单验证的例子
阅读目录本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部本文内容: 正则表达式正则表达式的使用方法正则表达式的特殊匹配字符正则表达式修饰符利用正则表达式进行表单验证的 ...

表单验证和正则表达式(一)

表单验证和正则表达式(一)相关推荐

最新文章

热门文章