javascript表单是否为空验证方法
表单验证
- 拿到表单内容进行非空验证（单独函数封装，方便后面调用）
- 为空则向P里面加内容
- 要阻断表单提交，不然直接跳走了
e.preventDefault() - 提交时要判定是否为空
- 键值提交也要判定是否为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 600px;
margin: 50px auto;
background-color: skyblue;
padding: 20px;
}
div input {
width: 520px;
height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<form action="">
<input type="text" name="name" placeholder="输入用户名"><br>
<p class="nameTip"></p>
<input type="password" name="password" placeholder="输入密码"><br>
<p class="passwordTip"></p>
<input type="submit" name="submit" value="按钮">
</form>
</div>
<script>
var formEle = document.querySelector('form')
var nameinput = document.querySelector('input[name="name"]')
var passwordinput = document.querySelector('input[name="password"]')
var pnameTip = document.querySelector('.nameTip')
var ppasswordTip = document.querySelector('.passwordTip')
//是否为空判定
function checkUserNameNull(){
if(nameinput.value==''){
pnameTip.innerHTML='输入名字'
return false
}else{
pnameTip.innerHTML=''
return true
}
}
//失去焦点进行用户名是否为空验证
nameinput.οnblur=function (){
checkUserNameNull()
}
//是否为空判定
function checkPasswordNull(){
if(passwordinput.value==''){
ppasswordTip.innerHTML='输入名字'
return false
}else{
ppasswordTip.innerHTML=''
return true
}
}
//失去焦点进行密码框是否为空验证
passwordinput.οnblur=function (){
checkPasswordNull()
}
//提交时验证
formEle.onsubmit = function (e) {
e.preventDefault()
//阻止表单默认提交
var nameisok=checkUserNameNull()
var passwordisok= checkPasswordNull()
//都满足不为空提交
if(nameisok && passwordisok){
location.href = 'https://www.baidu.com/'
}
}
//键值提交
document.οnkeyup=function (e){
var keyCode=e.keyCode|| e.which
if(keyCode==13&&e.shiftKey){
var nameisok=checkUserNameNull()
var passwordisok= checkPasswordNull()
if(nameisok && passwordisok){
location.href = 'https://www.baidu.com/'
}
}
}
</script>
</body>
</html>
到此这篇关于javascript表单是否为空验证方法的文章就介绍到这了,更多相关javascript表单为空内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS判断表单输入是否为空(示例代码)
复制代码 代码如下: //去掉输入字符串两边的空格 function trim(s) { var count = s.length; var st = 0; // start var end = count-1; // end if (s == "") return s; while (st < count) { if (s.charAt(st) == " ") st
-
js表单序列化判断空值的实例
学习javaweb的时候,做了将页面上的的表单信息添加到数据库中的练习.提交表单的时候,需要保证每个输入框.单选按钮.复选框等都不为空,刚开始的时候挨个获取控件的值进行判断是否为空,后来认识了表单序列化这么一个方法,就是了下用序列化来判断空值 //form表单页面 <form id="basicInfo" action="EmployeeServlet?flag=addEmployeeInfo" method="post"> <
-
JavaScript判断表单为空及获取焦点的方法
本文实例讲述了JavaScript判断表单为空及获取焦点的方法.分享给大家供大家参考,具体如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <meta http-equiv="Content
-
js判断所有表单项不为空则提交表单的实现方法
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(
-
JS判断form内所有表单是否为空的简单实例
如下所示: function checkForm(){ var input_cart=document.getElementsByTagName_r("INPUT"); for(var i=0; i<input_cart.length; i++) { if(input_cart[i].value==""||input_cart[i].value==null) { alert("信息不能为空!"); input_cart[i].focus()
-
javascript表单是否为空验证方法
表单验证 拿到表单内容进行非空验证(单独函数封装,方便后面调用) 为空则向P里面加内容 要阻断表单提交,不然直接跳走了e.preventDefault() 提交时要判定是否为空 键值提交也要判定是否为空 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
-
vue实现重置表单信息为空的方法
背景 之前表单重置为空的话是这样写的 this.fromline = { access_provider_name: '', // 接入商名称 access_provider_address: '', // 接入商所属地区 remark: '' // 备注 } 直接把表单对象的属性设置为空 今天突然发现一个这样的玩意 少写了好多代码 (开心) this.$refs['fromline'].resetFields() 这个玩意也可以实现表单重置. 以上这篇vue实现重置表单信息为空的方法就是小编分
-
jquery 必填项判断表单是否为空的方法
html页面 复制代码 代码如下: <form onsubmit="if(confirm('确定好你所填写的正确,不然会发错!')) {return checkForm();}else{return false;}" > <table > <tr> <td>选择发送人<font class="red">*</font></td> <td> <input type=&
-
拥有一个属于自己的javascript表单验证插件
自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1
-
利用策略模式与装饰模式扩展JavaScript表单验证功能
简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe
-
JavaScript表单验证完美代码
用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q
-
详解JavaScript表单验证（E-mail 验证）
本文为大家分享了JavaScript表单验证,被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): function validat
-
JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或
-
ASP中JavaScript处理复杂表单的生成与验证第1/3页
这里所谓的复杂表单,是指表单中包含多种不同的输入类型,比如下拉列表框.单行文本.多行文本.数值等.在经常需要更换这类表单的场合,需要有一个表单的动态生成程序.本文介绍的正是这样一个系统,它以数据库保存表单定义数据,利用ASP脚本动态生成表单HTML代码以及验证表单输入的脚本. 一.定义数据库表结构 在Web上经常可以看到"每周调查"之类的表单,这就是一种需要经常更新的表单.如果有一个动态生成表单及其验证脚本的程序,可以大大减少制作这些表单的工作量. 在本文的动态表单生成与验证示例中,我
-
JavaScript表单验证开发
本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下 在线demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html 效果图: /* 验证类型 testName: "验证用户", testPassword: "密码", testPhone: "手机号码", testQQ: "验证QQ", testLength: "验证是否在指定长度内", //