js表单提交的各种验证

最新推荐文章于 2024-08-05 21:28:12 发布

运气可以啊

最新推荐文章于 2024-08-05 21:28:12 发布

阅读量2.3k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42232623/article/details/92060283

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

demo1.html

<html>
    <head>
        <title>提交表单页</title>
        <script type="text/javascript">
            function myCheck()
            {
               for(var i=0;i<document.form1.elements.length-1;i++)
               {
                  if(document.form1.elements[i].value=="")
                  {
                     alert("当前表单不能有空项");
                     document.form1.elements[i].focus();
                     return false;
                  }
               }
               return true;
              
            }
        </script>
    </head>
    <body>
         <form name="form1" method="post" action="page2.html" onSubmit="return myCheck()">
             用户名:<input type="text" name="username"><br>
             性别:<input type="text" name="sex"><br>
             出生时间:<input type="text" name="birthday"><br>
             <input type="submit" value="提交">
         </form>
    </body>
</html>

demo2.jsp
商城首页登陆

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物商城</title>
<style type="text/css">





</style>
</head>

<body>
	<form name="form" action="server.jsp" method="post" onsubmit="return checked();">
	<input type="hidden" name="fn" value="login">
	
	<label>账号:</label><input type="text" name="username" id="username" ><span id="s1">账号在6-10位之间</span><br>
	<label>密码:</label><input type="password" name="pwd"   id="pwd"><span id="s2">密码在6-10位之间</span><br>
	<button type="submit">登陆</button>
	
	</form>
	
	
</body>
<script type="text/javascript">
	function checked(){
	var user = document.form.username.value;	
	var pwd = document.form.pwd.value;	
	//账号验证
		if(user==""){
			s1.innerHTML="账号不能为空";
			s1.style.color="red";
			return false;
		}if( user.length<6 || user.length >10 ){
			s1.innerHTML="账号长度不能小于6或大于10";	
			s1.style.color="red";
			return false;
		}
	//	s1.innerHTML="正确";
	//	s1.style.color="green";
		
	//密码验证
	if(pwd==""){
		s2.innerHTML="密码不能为空";
		s2.style.color="red";
		return false;
	}
	if(pwd.length<6 || pwd.length>10){
		s2.innerHTML="密码长度不能小于6或大于10	";
		s2.style.color="red";
		return false;
	}
//	s2.innerHTML="正确";
//	s2.style.color="green";	
	return true;	
	}




</script>
</html>

demo3.html


   

     <script type="text/javascript">
        function beforeSubmit(form){
        if(form.username.value==''){
        alert('用户名不能为空！');
        form.username.focus();
        return false;
        }
        if(form.password.value==''){
        alert('密码不能为空！');
        form.password.focus();
        return false;
        }
        if(form.password.value.length<6){
        alert('密码至少为6位，请重新输入！');
        form.password.focus();
        return false;
        }
        if(form.password.value!=form.password2.value) {
        alert('你两次输入的密码不一致，请重新输入！');
        form.password2.focus();
        return false;
        }
        return true;
        }
        </script>
         
        <fieldset>
           <legend>用户注册</legend>
            <form method="post" name="form" action="user.do?method=register" onSubmit="return beforeSubmit(this);">
             <table border="1" width="100%" cellspacing="0" cellpadding="0">
              <tr><td><label>用户名：<input type="text" name="username" value=""></label></td></tr>
              <tr><td><label>密   码：<input type="password" name="password" value=""></label></td></tr>
              <tr><td><label>重复密码：<input type="password" name="password2" value=""></label></td></tr>
              <tr><td><input value="注册" type="submit"> <input type="reset" value="重置"></td></tr>      
             </table>
            </form>
        </fieldset>！