JavaScript表单验证

来源：互联网发布：西门子软件质量规范编辑：程序博客网时间：2024/05/17 21:46

from.css

input{margin:12px;font-size:15px;color:SaddleBrown;vertical-align:middle;padding:5px;font-family:楷体;font-weight:bold;}[type=text],[type=password]{width:180px;height:30px;border-radius:5px;}[type=submit],[type=reset] {width:80px;padding:5px;background:Crimson;color:white;font-weight:bold;font-family:楷体;border-radius:7px;}body{font-weight:bold;font-family:楷体;}a{text-decoration:none;}a:link{color:blueViolet;}a:visited{color:brown;}a:hover{color:orangeRed;}a:active{color:dimGray;}

<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><title>表单</title><link rel=stylesheet href="from.css" type="text/css"><script type="text/javascript">function change(img){img.src=img.src+"?" + new Date().getTime();}/*用户名验证*/function check_name() {var nameNode = document.getElementsByName("user")[0];var name = nameNode.value;var spanNode = document.getElementById("userNameSpan");if(name.length > 6){spanNode.innerHTML = "用户名不能超过6个字".fontcolor("red");return false;} if(name.length == 0) {spanNode.innerHTML = "用户名不能为空".fontcolor("red");return false;}spanNode.innerHTML="";return true;}/*密码验证*/function check_password() {var nameNode = document.getElementsByName("password")[0];var name = nameNode.value;var spanNode = document.getElementById("userPassSpan");if(name.length > 16){spanNode.innerHTML = "密码不能超过16个字".fontcolor("red");return false;}if(name.length == 0) {spanNode.innerHTML = "密码不能为空".fontcolor("red");return false;}spanNode.innerHTML="";return true;}function submitForm() {return check_name()&&check_password();}</script></head><body><h1>登  入</h1><form align="center" action="#" method="get" onsubmit="return submitForm()">用  户<input type="text" name="user" onblur="check_name()" placeholder="请输入账号"/><br> <span id="userNameSpan"></span><br/>密  码<input type="password" name="password" onblur="check_password()" placeholder="请输入密码"/><br> <span id="userPassSpan"></span><br/><input type="submit" value="提交" /><input type="reset" value="重置"/><br/><a href="register.html">我要注册</a></form></body></html>

<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><title>表单</title><link rel=stylesheet href="from.css" type="text/css"><script type="text/javascript">function change(img){img.src=img.src+"?" + new Date().getTime();}/*用户名验证*/function check_name() {var nameNode = document.getElementsByName("user")[0];var name = nameNode.value;var spanNode = document.getElementById("userNameSpan");if(name.length > 6){spanNode.innerHTML = "用户名不能超过6个字".fontcolor("red");return false;} if(name.length == 0) {spanNode.innerHTML = "用户名不能为空".fontcolor("red");return false;}spanNode.innerHTML="";return true;}/*密码验证*/function check_password() {var nameNode = document.getElementsByName("password")[0];var name = nameNode.value;var spanNode = document.getElementById("userPassSpan");if(name.length > 16){spanNode.innerHTML = "密码不能超过16个字".fontcolor("red");return false;}if(name.length == 0) {spanNode.innerHTML = "密码不能为空".fontcolor("red");return false;}spanNode.innerHTML="";return true;}/*密码确认*/function check_passwords() {var nameNode = document.getElementsByName("password")[0];var name = nameNode.value;var nameNodes = document.getElementsByName("passwords")[0];var names = nameNodes.value;var spanNode = document.getElementById("userPasswordSpan");if(name!=names) {spanNode.innerHTML = "两次密码输入不一致".fontcolor("red");return false;}spanNode.innerHTML="";return true;}function submitForm() {return check_name()&&check_password()&&check_passwords();}</script></head><body><h1>注 册</h1><form action="#" align="center" method="get" onsubmit="return submitForm()"><!--文本域框 text-->用  户<input type="text" name="user" onblur="check_name()"/><br> <span id="userNameSpan"></span><br/><!--密码框 password-->密  码<input type="password" name="password" onblur="check_password()"/><br> <span id="userPassSpan"></span><br/>确  认<input type="password" name="passwords" onblur="check_passwords()"/><br> <span id="userPasswordSpan"></span><br/><!--提交按钮 submit--> <input type="submit" value="提交"/><!--重置按钮 reset--><input type="reset" value="重置"/><br/><a href="login.html">我要登入</a></form></body></html>

阅读全文

0 0