Home > Article > Web Front-end > Simple example of JavaScript implementing form validation function

Simple example of JavaScript implementing form validation function

黄舟Original: 2018-05-14 16:13:311539browse

This article mainly introduces the simple form verification function implemented by JS, involving JavaScript's acquisition, judgment, focus setting and other related operation skills for form submission content. Friends in need can refer to the following

Examples of this article Simple form validation function implemented in JS. Share it with everyone for your reference, the details are as follows:

Source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="myjs1.js"></script>
<link rel="stylesheet" type="text/css" href="myfile-2.css" rel="external nofollow" />
</head>
<body>
<form name="f1">
姓名:<input type="text" name="xm" />
<br/>
年龄:<input type="text" name="nl" />
爱好:<input type= "checkbox" name="ah" />爬山
<input type= "checkbox" name="ah" />游泳
<input type= "checkbox" name="ah" />网球
<input type= "checkbox" name="ah" />乒乓球
<br/>
密码：<input type="password" name="mm"/>
<br/>
重复密码:<input type="password" name="cfmm"/>
<br/>
备注:<textarea name="bz" rows="10" cols="20"></textarea>
<br/>
<input type="button" value="提交" onclick="checkit();"/>
</form>
</body>
</html>

myjs1.js file code:

// JavaScript Document
function checkit()
{ var flag = false;
 for(var i=0;i<document.forms[0].ah.length;i++)
{
if(document.forms[0].ah[i].checked)//checked 表示被选中
{
flag = true;
break;
}
}
if(!flag)//没有一个爱好被选中
{
alert("请至少选择一个爱好！");
return;//假如没有找到，又返回去，直到找到!
}
if(document.forms[0].mm.value.length<9)
{
alert("密码长度必须在8位数以上！");
document.forms[0].mm.focus();//让密码框获取焦点，焦点是 可以根据应用配合完成一些自动化操作，比如登录时输入了错误的用户名和密码，回转登录页后，可以让用户名输入框自动获得焦点，避免用户重新定位。
return;
}
if(document.forms[0].mm.value!=document.forms[0].cfmm.value)
{
alert("两次密码输入不一致，请重新输入密码！");
return;
}
if(document.forms[0].bz.value=="")
{
alert("请输入备注！");
}
}

Note: Use var to declare variables in js, and function to define functions.

This example can realize the verification of hobbies (cannot be empty), whether the password is consistent, and the length of the password must be greater than 8, and whether the remark is Empty!

In addition, the css file is left to the reader to beautify it~

The above is the detailed content of Simple example of JavaScript implementing form validation function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sample code for jQuery+jQuery.cookie.js plug-in to implement skin changing functionNext article：Sample code for jQuery+jQuery.cookie.js plug-in to implement skin changing function

See more

Simple example of JavaScript implementing form validation function

Related articles