JavaScript【表单验证2】

最新推荐文章于 2024-04-30 08:58:14 发布

一直在冬眠

最新推荐文章于 2024-04-30 08:58:14 发布

阅读量739

点赞数

分类专栏： JavaScript/JQuery 文章标签： javascript function input button action class

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865512

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了使用JavaScript进行表单验证的方法，包括input字段检查、button触发的验证逻辑以及利用action和class属性增强验证体验。

摘要由CSDN通过智能技术生成

JavaScript代码：

<script type="text/javascript">
 //判断是否为空
 function textIsNull(obj) {
     if (obj.value.length > 0)
         return true;
     else
         return false;
 } 
 //判断长度
 function textLength(obj, min, max) {
     if (isNaN(min))
         min = 0;
     if (isNaN(max))
         max = obj.value.length;
     if (obj.value.length >= min && obj.value.length <= max)
         return true;
     else
         return false;
 } 
 //判断密码是否一致
 function pwdSame(obj1, obj2) {
     if (obj1.value == obj2.value)
         return true;
     else
         return false;
 } 
 //鼠标移动上去时的样式
 function textClear(obj) {
     obj.style.borderWidth = "3px";
     obj.select();
 } 
 function dengluFocus() {
     textClear(document.getElementById("zhanghao"));
 } 
 function mimaFocus() {
     textClear(document.getElementById("mima"));
 } 
 function querenFocus() {
     textClear(document.getElementById("queren"));
 }
 //鼠标离开时的样式
 function textOut(obj) {
     obj.style.borderWidth = "1px";
 } 
 function dengluBlur() {
     textOut(document.getElementById("zhanghao"));
 } 
 function mimaBlur() {
     textOut(document.getElementById("mima"));
 } 
 function querenBlur() {
     textOut(document.getElementById("queren"));
 }
 function subClick() {
     if (textIsNull(document.getElementById("zhanghao")) == false) {
         alert("账号不允许为空！");
         document.getElementById("zhanghao").focus();
     } else if (textIsNull(document.getElementById("mima")) == false) {
         alert("密码不允许位空！");
         document.getElementById("mima").focus();
     } else if (textLength(document.getElementById("zhanghao"), 6, 20) == false) {
         alert("账号必须在6-20位之间！");
         document.getElementById("zhanghao").focus();
     } else if (textLength(document.getElementById("mima"), 6, 20) == false) {
         alert("密码不能小于6位！");
         document.getElementById("mima").focus();
     } else if (pwdSame(document.getElementById("mima"), document.getElementById("queren")) == false) {
         alert("两次密码输入不一致，请重新输入！");
         document.getElementById("mima").value = "";
         document.getElementById("queren").value = "";
         document.getElementById("mima").focus();
     } else {
         document.getElementById("myForm").submit();
     }
 }
 function init() {
     document.getElementById("sub").onclick = subClick;
     document.getElementById("zhanghao").onfocus = dengluFocus;
     document.getElementById("zhanghao").onblur = dengluBlur;
     document.getElementById("mima").onfocus = mimaFocus;
     document.getElementById("mima").onblur = mimaBlur;
     document.getElementById("queren").onfocus = querenFocus;
     document.getElementById("queren").onblur = querenBlur;
 }
</script>

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>靠</title>
   <style type="text/css">
     input{
         width:200px; }
        .tijiao{
         width:70px; }
   </style>       
</head>
<body οnlοad="init()">
<form id="myForm" action="index2.htm" method="post">
    账        号：<input id="zhanghao" name="zhanghao" type="text" /><br />
    密        码：<input id="mima" name="mima" type="password" /><br />
    确认密码：<input id="queren" name="queren" type="password" /><br />
    <input class="tijiao" id="sub" name="sub" type="button" value="提交" />
</form>
</body>
</html>