Home >Web Front-end >JS Tutorial >Example of simple form validation function implemented in JS

Example of simple form validation function implemented in JS

韦小宝Original: 2018-01-12 09:57:471795browse

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

The example of this article describes the simple form validation function implemented by JS. Share it with everyone for your reference, the details are as follows:

Source code:

<!DOCTYPE html>
<html>
<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, Define functions Use function,

This example can realize the verification of hobbies (cannot be empty), and whether the passwords are 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~

Related recommendations:

Solution to the problem that Extjs uploaded images cannot be previewed Solution_extjs

The restrictions before JS uploading pictures include (jpg jpg gif and size height and width), etc.

JS preview before uploading Picture example

The above is the detailed content of Example of simple form validation function implemented in JS. 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：jquery and ajax realize three-level linkage encapsulation and non-encapsulation of provinces and municipalitiesNext article：jquery and ajax realize three-level linkage encapsulation and non-encapsulation of provinces and municipalities

See more

Example of simple form validation function implemented in JS

Related articles