精华内容
下载资源
问答
  • 一、JavaScript表单校验 二、提交表单的两种方式 (1)通过向form标签中添加onsubmint事件实现表单提交 (2)通过向标签中添加onclick事件触发js函数以提交表单 一、JavaScript表单校验 表单校验,时HTML网页中...

    目录

     

    一、JavaScript表单校验

    二、提交表单的两种方式

    (1)通过向form标签中添加onsubmint事件实现表单提交

    (2)通过向标签中添加onclick事件触发js函数以提交表单


    一、JavaScript表单校验

    表单校验,时HTML网页中常常会用到的一个功能,例如,在HTML页面中实现登录功能,登录成功后跳转,这就需要用到表单校验,再或者,在HTML网页中插入一个调查表,但调查表中某些内容不能为空,需要填写内容方可提交。

    二、提交表单的两种方式

    (1)通过向form标签中添加onsubmint事件实现表单提交

    代码示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script>
    			function check(){
    				var inputElement = document.getElementById("user_name");
    				if(inputElement.value==""){
    					alert("请输入用户名");//当用户名为空时,弹出警告
    					return false;//将onsubmint值置为false,即用户名为空时无法提交
    				}
    				inputElement = document.getElementById("password");
    				if(inputElement.value==""){
    					alert("请输入密码");//当密码为空时,弹出警告
    					return false;//将onsubmint值置为false,即密码为空时无法提交
    				}
    				return true;
    			}
    		</script>
            <!--若表单提交成功,则跳转到百度界面-->
    		<form action="http://www.baidu.com" onsubmit="return check()"><!--添加一个form表单,且当onsubmit为true时,才可以提交-->
    			<input id="user_name" placeholder="请输入用户名" />
    			<input id="password" type="password" placeholder="请输入密码" />
    			<input type="submit" value="登录" /><!--插入提交按钮-->
    			<input type="reset" value="重置"/><!--点击重置按钮可将文本框内容清空-->
    		</form>
    	</body>
    </html>
    

    页面效果如下:

     用户名为空时,点击提交:

     密码为空时,点击提交:

    提交成功,则跳转到百度界面。

    (2)通过向标签中添加onclick事件触发js函数以提交表单

    代码示例:

    html代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<style>
    			i{
    				font-style: normal;
    				cursor: pointer;
    				color: gainsboro;
    				background-color: brown;
    				border: 1px,solid,rosybrown ;
    				display: inline-block;
    				height: 30px;
    				width: 60px;
    				text-align: center;
    				line-height: 30px;
    			}
    		</style>
    		<form id="login" action="http://www.baidu.com">
    			<input id="user_name" placeholder="请输入用户名" />
    			<input id="password" type="password" placeholder="请输入密码" />
    			<input type="radio" name="sex" />男<input type="radio" name="sex" />女<!--单选框-->
    			
                <select id="grade"><!--下拉列表-->
    				<option id="0">--请选择--</option>
    				<option id="1">一年级</option>
    				<option id="2">二年级</option>
    			</select>
    			<i id="botton" onclick="check()">登录</i>
    			<i id="reset">重置</i>
    		</form>
    		
    		<script>
    			document.getElementById("reset").addEventListener("click",function(){
    				document.getElementById("login").reset();
    			});
    		</script>
    	</body>
    </html>
    

    js代码:

    function check(){
        var inputElement = document.getElementById("user_name");
    	if(inputElement.value==""){
    		alert("请输入用户名");
    		return;
    	}
    	inputElement = document.getElementById("password");
    	if(inputElement.value==""){
    		alert("请输入密码");
    		return;
    	}
    				
    	var inputElements = document.getElementsByName("sex");
    	var flag = 0;
    	for(var i = 0;i<inputElements.length;i++){
    		if(inputElements[i].checked){
    			flag = 1;
    			break;
    		}
    		if(flag == 0){
    			alert("请选择性别");
    			return;
    		}					
    	}
    				
    	var options = document.getElementById("grade").options;
    	for(i = 0;i<options.length;i++){
    		if(options[i].selected&&options[i].id==0){
    			alert("请选择年级");
    			return;
    		}
    	}
    				
    	document.getElementById("login").submit();//经过一系列空判别时,通过submit()方法提交
    }
    
    document.getElementById("reset").addEventListener("click",
        function(){
    	    document.getElementById("login").reset();
        }
    );

     效果同上述,不再赘述。

     

    展开全文
  • 使用JavaScript实现表单校验

    千次阅读 2017-07-31 22:18:10
    使用JavaScript实现表单验证最近在学习JavaScript,因此想到使用js实现表单校验。上网查询了很多的方法和遇到的问题,现在问题都一一解决,特此陈述案例实现步骤及遇到的问题。

    使用JavaScript实现表单验证

    最近在学习JavaScript,因此想到使用js实现表单校验。上网查询了很多的方法和遇到的问题,现在问题都一一解决,特此陈述案例实现步骤及遇到的问题。


    文本框校验

    以下是文本框的校验步骤。
    

    1.获取待校验的文本框value值,
    2.对value值设置判定条件,使用if语句或switch语句实现。
    3. 若满足条件,则校验通过,返回值为true。
    4. 若不满足条件则返回值为false,替换文本输出校验的提示信息。
    5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件。
    6. 在input中调用校验函数,我使用的是onblur事件触发校验函数。

    下拉框校验

    下拉框的校验相比文本框略有不同,下拉框中option的返回值为value,由select中的name值获取到用户的选择,因此在下拉框的校验函数中通过id获取到select中的value,在根据value值是否为空或为其余的非法值而进行不同的判断,其余的步骤也与文本框相同。
    表单校验样式如下:
    这里是表单的初始样式
    确认密码校验
    用户名和分组校验

    遇到的问题

    1. 校验表单时出现问题但表单仍然能够提交?
      原因:onsubmit事件作为一个提交动作有一个默认的参数,这个参数的默认值为true,前面提到如果满足条件要求就返回true否则返回false,每一项的校验中都要设置一个布尔类型的返回值,如果所有的校验全部通过才能正常提交表单,只要有一项不满足条件也不能提交表单而需要重新输入,因此需要对每一项校验函数的返回值做一个逻辑运算,全为真则最终返回给onsubmit的值为true,否则为false,而onsubmit的参数为false则无法提交,故实现了表单校验失败时阻止提交。
    2. 一开始输入错误的内容,在修改变成正确的内容之后提示仍然为之前的提示?
      原因:在返回值为true时,将输出提示信息的文本内容置为空,即document.getElementById(“什么什么”).innerHTML=”“;
    3. onchange和onblur事件都可以用来触发校验,并且两者都会在失去焦点之后实现校验,但onblur触发校验时有可能会由于用户间断输入而提示输入内容不符合要求。
    4. 表单校验的js代码段不能等页面都加载完成之后加载。

    代码块

    以下为程序源码:
    <script>
    

    function validateUsername(){
    var input = document.myform.userName.value;
    if(input == “”||input == null) {
    document.myform.userName.focus();
    document.getElementById(“uname”).innerHTML=”用户名不能为空!”;
    return false;
    }
    else if(input.length>5 || input.length<2){
    document.getElementById(“uname”).innerHTML= “用户名在2~5位”;
    document.myform.userName.focus();
    return false;
    }
    else{
    document.getElementById(“uname”).innerHTML=”“;
    return true;
    }
    }
    function validatePassword(){
    var password = document.myform.password.value;

    if(password == “”||password == null) {
    document.getElementById(“upss”).innerHTML = “密码不能为空!”;
    document.myform.password.focus();
    return false;

    }
    else if(password.length>12 || password.length<6){
    document.getElementById(“upss”).innerHTML= “密码在6~12位”;
    document.myform.password.focus();
    return false;
    }
    else{
    document.getElementById(“upss”).innerHTML= “”;
    return true;
    }
    }
    function validatePasswordAgain(){
    var psw = document.myform.psw.value;
    var password = document.myform.password.value;
    if(psw!=password){
    document.getElementById(“upssa”).innerHTML=”两次密码输入不同”;
    return false;
    }else{
    document.getElementById(“upssa”).innerHTML = “”;
    return true;
    }
    }
    function validateGroup(){
    var select = document.getElementById(“select”);
    if(select.value == “NONE”){
    document.getElementById(“groupID”).innerHTML=”请选择分组!”;

    return false;
    }else {
    document.getElementById(“groupID”).innerHTML=”“;

    return true;
    }
    }
    function validateForm(){
    var flag = validateUsername()&&validatePassword()&&validatePasswordAgain()&&validateGroup();
    if(flag){
    return true;
    }else return false;
    }

    ```html
    <div class="warp">  
    <h1>新用户注册</h1>
    <form action="/myproject/admin/addUser" name="myform" onsubmit="return validateForm()">
    <div class="form-warp">     
        <ul>
            <li>用户名称:<input class="input" type="text" name="userName" placeholder="请输入..." onblur="validateUsername()"/></li>
            <li>密   码:<input class="input" type="password" name="password" id="password" placeholder="请输入..." onblur="validatePassword()"/></li>
            <li>确认密码:<input class="input" type="password" name="psw" id="psw" placeholder="请输入..." onblur="validatePasswordAgain()"/></li>
            <li>真实姓名:<input class="input" type="text" name="realName" placeholder="请输入..."/></li>
            <li>分   组:<select name="group.id" id="select" onblur="validateGroup()">
                        <option value="NONE">请选择...</option>
                        <#list groups as group>
                            <option value="${group.id}">${group.name}</option>
                        </#list>
                        </select>
    
            </li>
            <li><input type="submit" value="提交" id="button"/></li>
        </ul>
    <ul class="validate">
        <li id="uname"></li>
        <li id="upss"></li>
        <li id="upssa"></li>
        <li id="groupID"></li>
    </ul>
    </div>
    </form>
    </div>
    

    “`

    展开全文
  • js中的常用事件】 获得焦点:onfocus 失去焦点:onblur 按键抬起事件:onkeyuo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!...

    通过javascript对用户名,密码,确定密码,邮箱进行校验
    【js中的常用事件】
    获得焦点:onfocus
    失去焦点:onblur
    按键抬起事件:onkeyuo

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--
    			引入外部的js文件
    		-->
    		<script type="text/javascript" src="../js/regutils.js" ></script>
    		<script>
    			/*
    				1. 确定事件 : onfocus
    				2. 事件要驱动函数
    				3. 函数要干一些事情: 修改span的内容
    			*/
    			function showTips(spanID,msg){
    				//首先要获得要操作元素 span
    				var span = document.getElementById(spanID);
    				span.innerHTML = msg;
    			}
    			/*
    				校验用户名:
    				1.事件: onblur  失去焦点
    				2.函数: checkUsername()
    				3.函数去显示校验结果
    			*/
    			function checkUsername(){
    				//获取用户输入的内容
    				var uValue = document.getElementById("username").value;
    				//对输入的内容进行校验
    				//获得要显示结果的span
    				var span = document.getElementById("span_username");
    				if(uValue.length < 6){
    					//显示校验结果
    					span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
    					return false;
    				}else{
    					span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
    					return true;
    				}
    			}
    			
    			/*
    			 密码校验
    			 */
    			function checkPassword(){
    				//获取密码输入
    				var uPass = document.getElementById("password").value;
    				
    				var span = document.getElementById("span_password");
    				
    				//对密码输入进行校验
    				if(uPass.length < 6){
    					span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
    					return false;
    				}else{
    					span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
    					return true;
    				}
    			}
    			
    			/*
    			 确认密码校验
    			 * */
    			function checkRePassword(){
    				//获取密码输入
    				var uPass = document.getElementById("password").value;
    				
    				//获取确认密码输入
    				var uRePass = document.getElementById("repassword").value;
    				
    				
    				var span = document.getElementById("span_repassword");
    				
    				//对密码输入进行校验
    				if(uPass != uRePass){
    					span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
    					return false;
    				}else{
    					span.innerHTML = "";
    					return true;
    				}
    			}
    			
    			/*
    			 校验邮箱
    			 * */
    			function checkMail(){
    				var umail = document.getElementById("email").value;
    				
    				var flag = checkEmail(umail);
    				
    				var span = document.getElementById("span_email");
    				//对邮箱输入进行校验
    				if(flag){
    					span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
    					return true;
    				}else{
    					span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
    					return false;
    				}
    			}
    			
    			function checkForm(){
    				var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
    				return flag;
    			}
    			
    		</script>
    	</head>
    	<body>
    		<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
    			用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
    			密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
    			确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
    			邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
    			手机号:<input type="text" id="text" /><br />
    			
    			<input type="submit" value="提交" />
    		</form>
    	</body>
    </html>
    
    
    展开全文
  • 表单校验功能,当失去焦点时,如果用户名或密码为空,在其后添加提醒信息 提示:提示信息可以放在span中,颜色通过css样式设置 代码如下 <body> 用户名:<input name="username" type="text" ...

    表单校验功能,当失去焦点时,如果用户名或密码为空,在其后添加提醒信息

     

          提示:提示信息可以放在span中,颜色通过css样式设置

    代码如下

    <body>
    用户名:<input name="username" type="text" onfocus="handleFocus()" onblur="nameBlur()" onchange="nc()"/><font id="1" color="red"></font><br/>
    密码:<input name="pwd" type="password" onfocus="handleFocus()" onblur="pwdBlur()" onchange="pc()"/><font id="2" color="red"></font><br/>
    
    <button type="submit">提交</button><br/>
    </body>
    <script>
    function nameBlur() {
        var nam=document.querySelector("font[id='1']");
        var v=document.querySelector("input[name^='u']")
        if(v.value==''){
            nam.innerHTML="*用户名不能为空"
        }
    }
    function nc() {
        var nam=document.querySelector("font[id='1']");
        nam.innerHTML="";
    }
    function pwdBlur() {
        var nam=document.querySelector("font[id='2']");
        var v=document.querySelector("input[name^='p']")
        if(v.value==''){
            nam.innerHTML="*密码不能为空"
        }
    }
    function pc() {
        var nam=document.querySelector("font[id='2']");
        nam.innerHTML="";
    }
    
    </script>

     

    展开全文
  • 利用js实现表单校验

    万次阅读 多人点赞 2018-09-07 17:20:05
    1、所用到的三个事件: ...3、利用checkform判断表单中的内容是否规范,如果规范submit按钮可以提交表单信息。 简单效果:         form中的代码: &lt;form action="demo.html" onsu...
  • js实现表单校验

    2019-10-15 10:35:51
    js实现表单校验 1.话不多说,上效果 : 当每个输入框失去焦点时会通过正则表达式来验证格式是否正确 当输入框的校验全部正确以后才可以登录,点击登录按钮后到达登录成功页面 如果输入框校验有1个或多个不通过的...
  • 使用javascript实现表单校验 技术分析 确定需要的事件为onfocus()聚焦事件和onblur()离焦事件 在指定的位置输出提示信息,就要innerHTML=‘提示信息’ 代码步骤 首先确定事件onfocus()聚焦事件,并为其绑定一个函数 ...
  • 最近在学习JavaScript,因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤,需要的的朋友参考下吧
  • 如图,要求输入用户名失去焦点后用户名不得为空或者小于6个字符,否则就显示提示,密码同理,第二个确认密码只需判断与上一个密码框输入是否一致即可,否则显示两次密码... <!... <... ...表单校验</title> </..
  • 1、步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
  • /*校验邮箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("邮箱格式不正确!"); return false;...
  • Vue.js 表单校验插件

    2020-10-21 17:58:00
    主要介绍了Vue.js 表单校验插件的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍,需要的朋友可以参考下
  • 主要介绍了JS实现的简单表单验证功能,结合完整实例形式分析了javascript基于字符串长度判定、数据类型判定及正则判断等操作进行表单验证的相关实现技巧,需要的朋友可以参考下
  • 使用JS实现表单验证

    千次阅读 多人点赞 2020-07-02 13:23:17
    目录表单页面展示FormCheck.jspCSS样式Register.cssJavaScript代码FormCheck.js 以注册页面为例实现表单验证功能。 表单页面展示 FormCheck.jsp ...注册页面表单校验</title> <link rel="st
  • 同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头...
  • JavaScript实现简单的注册表单校验

    千次阅读 2019-05-23 22:06:38
    js实现简单的注册表单校验 案例分析: 一般在我们注册时页面会要求我们填写基本信息,而信息格式的正确与否决定了我们能否注册成功。 当我们写完一行注册信息,鼠标焦点离开当前行时,行会用我们填写的信息去与后台...
  • 依赖jQuery的表单校验脚本,在使用此脚本之前请先引入jQuery文件
  • vue中实现表单校验

    千次阅读 2020-01-02 21:00:11
    前提条件:vue-cli创建一个项目,安装async-validator(npm i async-validator -S) ...一个form表单需要form、formItem、input,初步代码如下: formTest: <template> <div> for...
  • vue3——实现表单校验

    2021-10-02 20:59:34
    带着这些问题,今天一起来看一下vue3中如何实现表单校验吧~ 一、表单校验的意义 当用户在输入框内输入的值或者必选项未进行选择时,就不触发下一步的操作 可以让用户的信息都按一定的规则来设置,方便统一管理 ...
  • 某互联网公司开发官网的首页,为了适配移动端...现在需要编写代码实现效果。 项目名称为menu,包含首页index.html、css文件夹、js文件夹,其中,css文件夹包含style.css文件;js文件夹包含jquery.min.js 和index.js
  • Vant-ui实现表单校验组件

    千次阅读 2020-12-03 10:15:44
    <template> <div> <slotname="items"></slot> </div> </template> <script> exportdefault{ name:'vant-form', data(){ return{ rulesEles:[] ......
  • vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识,感兴趣的朋友一起看看吧
  • 表单校验JavaScript策略模式的使用

    千次阅读 多人点赞 2020-08-11 14:12:28
    众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重。事实上,几乎每一个中大型网站都会有“登录注册”以验证用户信息、防止一些不可名状的隐患。。。 那么表单的优劣就成了前端开发者急需解决的问题...
  • js var errorTip = { show:(ele,text)=> { if(ele && text){ var mustEle = document.getElementById(ele+""); if(mustEle){ console.log('已找到该节点',mustEle) mustEle.innerHTML = ''
  • 在平常的页面当中,我们经常用到表单表单验证,表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者,在这里贴下我的菜鸟代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,984
精华内容 19,593
关键字:

js实现表单校验