html表单验证步骤,一、表单的基本验证技术（一）

一、本课目标

掌握使用表单选择器选择网页元素

掌握使用String对象验证表单内容

掌握表单验证的事件和方法

1.1为什么要做表单验证？

减轻服务器的压力

保证输入的数据复合要求

image.png

1.2、常用的表单验证

image.png

1.3表单验证的思路

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

分析：

获取表单元素值

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

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

二、表单选择器

表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素。

2.1根据type值来选取元素

通过冒号后面跟不同的type值可以选取到不同的表单元素。

image.png

image.png

2.1属性过滤选择器(根据状态属性来选择元素)

image.png

示例代码：

休闲网注册页面

注册 | 登录 | 帮助

编号：

姓名：

性别： 男

女

爱好：

编程

读书

运动

家乡：

北京

上海

天津

关于我们 | 诚聘英才 | 联系方式 | 帮助中心

$(function(){

var html = "";

// 这个地方#userform后面的空格如果取消的话则无法选中

$("#userform :selected").each(function(){

html = $(this).html();

alert(html);

})

})

css文件：

*{padding:0; margin:0;}

body{

font-size:13px;

color:#000;

line-height:25px;

}

.main{

clear:both;

}

#header{

background-image: url(../images/bg.gif);

background-repeat: repeat-x;

height: 36px;

}

#headerLeft{width:200px;

float:left;

}

#headerRight{width:160px;

float:right;

color:#FFF;

}

.register{padding: 5px;}

.register p{clear: both;}

#footer{text-align:center;

color:#333;

line-height:35px;

}

#footer a{

color:#333;

text-decoration:underline;

}

#footer hover{

color:#333;

text-decoration:none;

}

三、验证表单内容

1、使用String对象验证邮箱

不能为空，格式正确。

实现思路：

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

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

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

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

示例代码：

css文件：

*{padding:0; margin:0;}

body{

font-size:12px;

color:#000;

line-height:25px;

}

ul,li{list-style: none;}

.main{

float:none;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

clear:both;

}

#header{

background-image: url(../images/bg.gif);

background-repeat: repeat-x;

height: 36px;

}

#headerLeft{width:200px;

float:left;

}

#headerRight{width:160px;

float:right;

color:#FFF;

}

#center{

width:362px;

text-align:center;

margin-top: 20px;

margin-right: auto;

margin-bottom: 20px;

margin-left: auto;

}

.inputs{width:110px;

height:16px;

border:solid 1px #666666;

}

.bold{

font-size:18px;

font-weight:bold;

text-align:center;

line-height:45px;

height:45px;

}

.rb1{

height:20px;

color:#fff;

font-size:13px;

background:#d32c47;

padding:3px 10px;

border-left:1px solid #fff;

border-top:1px solid #fff;

border-right:1px solid #6a6a6a;

border-bottom:1px solid #6a6a6a;

cursor:pointer;

}

.register{width: 350px; margin: 5px auto; border: 1px #cccccc solid; border-radius: 5px; background: #efefef; clear: both;}

.register li{height: 35px; line-height: 35px;}

.register span{display: inline-block; width: 80px; text-align: right;}

.register li:last-of-type{padding-left: 90px;}

#footer{text-align:center;

color:#333;

line-height:35px;

}

#footer a{

color:#333;

text-decoration:underline;

}

#footer:hover{

color:#333;

text-decoration:none;

}

注册页面：

休闲网登录页面

注册 | 登录 | 帮助

• 登录休闲网
• Email：
• 密码：

关于我们 | 诚聘英才 | 联系方式 | 帮助中心

$(document).ready(function(){

$("form").submit(function(){

var mail = $("#myform :text").val();

if (mail == ""){

alert("Email不能为空！");

return false;

}

// 该方法如果字符串不包含指定的值则返回-1

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

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

return false;

}

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

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

return false;

}

return true;

})

})

登录成功页面：

休闲网登录成功页面

注册 | 登录 | 帮助

祝贺你，登录休闲网成功！

关于我们 | 诚聘英才 | 联系方式 | 帮助中心

indexOf()方法：查找某个指定的字符串值在字符串中首次出现的位置。当里面只有一个参数的时候，该参数就是要查找的字符串。当有两个参数的时候，第二个参数是指从该位置开始查找。

image.png

2、文本框内容的验证

密码不能为空，不少于6个字符，姓名不能为空，不能有数字。

实现思路：

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

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

3、使用length属性获取文本长度，然后使用for循环和subString()方法依次截断单个字符，最后判断每个字符是否是数字

image.png

image.png

示例代码：

$(document).ready(function(){

$("#myform").submit(function(){

var pwd = $("#pwd").val();

if (pwd == "") {

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

return false;

}

if (pwd.length < 6) {

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

return false;

}

var repwd = $("#repwd").val();

if (pwd != repwd) {

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

return false;

}

var user = $("#user").val();

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;

})

})