web前端必学功法之一：表单校验（一）

前端小菜馆 08-23 107

前言：

此刻看官们对“html注册界面js校验”大约比较珍视，你们都想要学习一些“html注册界面js校验”的相关内容。那么小编也在网上汇集了一些有关“html注册界面js校验””的相关资讯，希望各位老铁们能喜欢，小伙伴们快快来学习一下吧！

## web前端必学功法之一：表单校验（一）

案例效果：

![在这里插入图片描述]()

这里的布局采用的是bootstrap布局

```html

</div>

</div>

</div>

<input type="checkbox" name="userSex" value="男"> 男

</label>

<input type="checkbox" name="userSex" value="女"> 女

</label>

<input type="checkbox" name="userSex" value="未知"> 未知

</label>

</div>

<input type="checkbox" name="userHobby" value="唱歌"> 唱歌

</label>

<input type="checkbox" name="userHobby" value="睡觉"> 睡觉

</label>

<input type="checkbox" name="userHobby" value="敲代码">敲代码

</label>

</div>

</select>

</div>

</div>

</div>

</form>

</div>

```

要求：

1.验证姓名

1)不能为空 2)长度为6-12位

2.验证密码

1)不能为空 2)长度为6-12位 3)不能包含姓名

3.验证年龄

1)不能为空 2)范围在1-100之间

4.验证性别

必须选择一项

5.验证爱好

必须选择一项

6.验证城市

必须选择一项

满足条件

1)弹出所有的内容 2)提交表单

不满足条件

1)说错误原因 2)不提交表单

思路分析：

1.绑定事件，绑定提交按钮的点击事件

2.获取表单元素：通过选择器获取

3.判断条件：根据要求判断对应的表单元素的值是否满足

4.提交表单：调用表单的submit()

实现步骤：

1.绑定提交按钮的点击事件

2.获取每个元素的值

3.判断对应的表单元素是否满足条件

4.如果不满足条件，则显示错误原因

5.如果满足条件，弹出内容，提交表单

```javascript

// 表单校验

//1.绑定提交按钮的点击事件

document.getElementById("submitBtn").onclick = function(){

//2.获取每个表单元素的值

// 验证姓名

// 1)不能为空 2)长度为6-12位

// 获取姓名

var userName = document.getElementById("userName").value;

// 1)不能为空

if(isEmpty(userName)){

document.getElementById("msg").innerHTML = "姓名不能为空!";

return;

}

// 2)长度为6-12位

if(userName.length < 6 || userName.length > 12){

document.getElementById("msg").innerHTML = "姓名的长度在6-12位之间";

return;

}

// 2.验证密码

// 1)不能为空 2)长度为6-12位 3)不能包含姓名

var userPwd = document.getElementById("userPwd").value;

// 1)不能为空

if(isEmpty(userPwd)){

document.getElementById("msg").innerHTML = "密码不能为空!";

return;

}

// 2)长度为6-12位

if(userPwd.length < 6 || userPwd.length > 12){

document.getElementById("msg").innerHTML = "密码的长度在6-12位之间";

return;

}

// 3)不能包含姓名 indexOf();判断字符串中是否包含指定值，如果不包含则返回-1

if(userPwd.indexOf(userName) != -1){

document.getElementById("msg").innerHTML = "密码中不能包含姓名在内";

}

// 验证年龄

// 1)不能为空 2)范围在1-100之间

var userAge = document.getElementById("userAge").value;

// 1)不能为空

if(isEmpty(userAge)){

document.getElementById("msg").innerHTML = "年龄不能为空!";

return;

}

// 2)范围在1-100之间

if(userAge <1 || userAge > 100){

document.getElementById("msg").innerHTML = "年龄范围在1-100之间";

return;

}

// 验证性别

// 必须选择一项

//获取性别

var userSex = "";

//获取性别单选框

var radios = document.getElementsByName("userSex");

//遍历,得到被选中的值

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

//判断是否选中

if(radios[i].checked){

userSex = radios[i].value;

}

// 1)不能为空

if(isEmpty(userSex)){

document.getElementById("msg").innerHTML = "请选择性别!";

return;

}

// 5.验证爱好

// 必须选择一项

var userHobby = "";

var checkboxs = document.getElementsByName("userHobby");

//遍历，得到被选中的值

for(var j = 0;j<checkboxs.length;j++){

//判断是否被选中

if(checkboxs[j].checked){

//拼接爱好

userHobby += checkboxs[j].value + ",";

}

// 1)不能为空

if(isEmpty(userHobby)){

document.getElementById("msg").innerHTML = "请选择爱好!";

return;

}

//截取字符串，去除最后多余的“,”;

userHobby = userHobby.substring(0,userHobby.length - 1);

// 验证城市

// 必须选择一项

// 获取城市

var userCity = document.getElementById("userCity").value;

// 1)不能为空

if(isEmpty(userCity)){

document.getElementById("msg").innerHTML = "请选择城市!";

return;

}

//获取简介

var userRemark = document.getElementById("userRemark").value;

//满足条件，则清空提示信息

document.getElementById("msg").innerHTML = "";

//弹出所有的内容

var str = "姓名:" + userName + "\n密码:" + userPwd + "\n";

str +="年龄:" + userAge + "\n性别:" + userSex + "\n";

str +="爱好" + userHobby + "\n城市" + userCity +"\n";

str +="简介" + userRemark;

alert(str);

// 设置表单提交的地址

document.getElementById("myform").action = ";;

//提交表单

document.getElementById("myform").submit();

}

// 封装一个方法,用来进行非空判断

// 判断字符串是否为空

// 如果为空,返回true,

// 如果不为空,返回false

// trim()：去除字符串前后空格

function isEmpty(str){

if(str == null || str.trim() ==""){

return true;

}

return false;

}

</script>

```

本文地址：http://www.longkongtuishu.com/ca2f4AmsGBVcPCA.html

标签： #html注册界面js校验