input框 为空验证提示

最新推荐文章于 2024-03-01 10:56:38 发布
最新推荐文章于 2024-03-01 10:56:38 发布
阅读量1.3w 收藏 9
点赞数
分类专栏： php代码 文章标签： input
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
h4{
background-color: aquamarine;
width: 100%;
}
a{
color: red;
}
 
p{
margin-left: 300px;
}
 
</style>
<script>
function nameve(){
var name=document.getElementById("name");
var name1=document.getElementById("name1");
var verify=name.value;
if(verify==""){
name1.innerHTML="账号不能为空";
name1.style.color="red";
}
if((verify.length<4&&verify.length>0)||verify.length>16){
name1.innerHTML="长度过长或过短";
name1.style.color="red";
}
if(verify.length>=4&&verify.length<=16){
name1.innerHTML="格式正确";
name1.style.color="green";
}
}
function passve(){
var name=document.getElementById("pass");
var name1=document.getElementById("pass1");
var verify=name.value;
if(verify==""){
name1.innerHTML="密码不能为空";
name1.style.color="red";
}
if((verify.length<6&&verify.length>0)||verify.length>16){
name1.innerHTML="长度过长或过短";
name1.style.color="red";
}
if(verify.length>=6&&verify.length<=16){
name1.innerHTML="格式正确";
name1.style.color="green";
}
}
function passwordve(){
var name=document.getElementById("password");
var name1=document.getElementById("password1");
var pass=document.getElementById("pass");
var verify=name.value;
var verify1=pass.value;
if(verify==verify1){
name1.innerHTML="正确";
name1.style.color="green";
}
   else{
    name1.innerHTML="两次输入的密码不一致";
    name1.style.color="red";
   }
}
function ageve(){
var age0=/^((19\d{2})|(20\d{2}))--(0?[1-9]|1[0-2])--(0?[1-9]|[1-2]\d|3[0-1])$/;
var age=document.getElementById("age").value;
var age1=document.getElementById("age1");
if(age0.test(age)==true){
age1.innerHTML="正确";
age1.style.color="green";
}
else{
age1.innerHTML="格式错误";
    age1.style.color="red";
}
}
function emave(){
var ema0=/^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
var ema=document.getElementById("ema").value;
var ema1=document.getElementById("ema1");
if(ema0.test(ema)==true){
ema1.innerHTML="正确";
ema1.style.color="green";
}
else{
ema1.innerHTML="格式错误";
    ema1.style.color="red";
}
}
function telve(){
var tel0=/^1\d{10}$/;
var ema=document.getElementById("tel").value;
var ema1=document.getElementById("tel1");
if(tel0.test(ema)==true){
ema1.innerHTML="正确";
ema1.style.color="green";
}
else{
ema1.innerHTML="格式错误";
    ema1.style.color="red";
}
}
 
</script>
</head>
<body>
<form action="" method="get">
<h5><a>*</a>为必填内容</h5>
<h4>你的账号信息</h4>
<p><p><a>*</a>昵称：<input id="name" type="text" onblur="nameve()" /><a id="name1"></a>
<br />英文字符，数字或者下划线，长度为4-16个字符
</p>
</p>
<p><p><a>*</a>密码：<input id="pass" type="password" onblur="passve()" /><a id="pass1"></a>
<br />6-16个字符组成
</p>
</p>
<p><p><a>*</a>重新输入密码：<input id="password" type="password" onblur="passwordve()" /><a id="password1"></a>
<br />
</p>
</p>
<h4>你的个人信息</h4>
<p><p><a>*</a>出生年月：<input id="age"  type="text" onblur="ageve()" /><a id="age1"></a>
<br />日期格式yyyy--mm--dd
</p>
</p>
<p ><p><a>*</a>性别：<input type="radio" id="man" />男<input type="radio" id="woman" />女
<br />
</p>
</p>
<p><p><a>*</a>电子邮件：<input type="email" id="ema" onblur="emave()"/><a id="ema1"></a>
</p>
</p>
<p><p><a>*</a>电话号码：<input type="tel" id="tel" onblur="telve()"/><a id="tel1"></a>
<br />
</p>
</p>
<h4>所在地区</h4>
<p><p>国家：<select>
<option value="中华人民共和国">中华人民共和国</option>
<option value="华侨">美国</option>
</select>
</p>
</p>
<p><p>省份：<select>
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
</select>
</p>
</p>
<h4>相关服务条例</h4>
<p><p><input type="checkbox" value="我同意以下条款" />
服务条款
</p>
</p>
<p><p><input type="submit" value="提交注册" />
</p></p>
</form>
</body>
</html>
1996_90
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS判断所有input，全部为空提示，有一个不为空则提交
sinat_33940108的博客
07-08 1172
首先为所有input增加name属性 <el-form-item label="承担的重点工作" prop="priorityWork"> <el-input v-model="dataForm.priorityWork" placeholder="承担的重点工作" style="width:450px" name="must"></el-input> </el-form-item> <el-form-it
Input框输入框为空，提示抖动
masterMoore的博客
09-26 1230
一个简单的判断输入是否为空的的小技巧：例如Input框输入框为空，提示抖动
我用 React 和 Vue 开发了同款 App, 发现了这些不同！
开发者技术前线-DevolperFront
11-04 736
点击上方“开发者技术前线”，选择“星标”13：21 在看真爱作者｜Sunil Sandhu译者｜王强编辑｜可可 前几天，我们曾和大家探讨了 React、Angular、Vue.js 三大框架的优缺点。在留言中，许多朋友提到 Vue 在国内的市场应用广泛，最近 Vue 3.0 Pre-Alpha 的发布也让它成为前端圈关注的焦点。而 React 则易于学习，有网友评论，不关注框架本身提供的 A...
el-input组件当数据为空时， 边框变红，并提示错误信息
最新发布
wlijun_0808的博客
03-01 1827
el-input组件当数据为空时， 边框变红，并提示错误信息 先设置输入框变红的样式以及提示文字的样式class。对于样式class 用变量来控制是否奏效。主要是使用动态类的方式。
html+php input明明有值却仍然提示字段为空
Flawless_CSDN的博客
09-26 1315
一、 检查 name属性中有没有空格 如：<input name="name id">可能会导致无法获取。 二、 把name值改成短值测试（很诡异） 同学代码本来是 <input type="text" name="Product id"/> 运行失败！ 头一次改成 <input type="text" name="Productid"/>...
vue element table中自定义一些input的验证操作
10-15
`required`表示该字段是否必填，`message`定义了验证失败时的提示信息，`trigger`指定了触发验证的事件，如`blur`表示失去焦点时触发验证。 然后，我们需要在`el-form-item`中使用`:prop`属性来指定需要验证的字段...
input输入框鼠标焦点提示信息
09-03
相反，当用户离开输入框（失去焦点）时，`onblur`事件会检查输入框是否为空，如果为空，就会恢复显示提示信息。 这种实现方式简单易懂，但也有其局限性。首先，它依赖于JavaScript，如果用户禁用了JavaScript或者...
checkbox 复选框不能为空
09-05
总结起来，"checkbox 复选框不能为空"的实现涉及到JavaScript表单验证，通过检查复选框组中是否有选中的项来确保用户做出选择。这不仅提高了用户体验，也确保了数据的完整性。在实际开发中，可以根据项目需求选择...
layui实现input框添加tag
04-24
本文将详细介绍如何使用Layui实现input框添加tag功能。 首先，我们需要理解tag输入框的基本概念。Tag输入框是一种常见的用户界面元素，它允许用户在输入文本的同时，将其转化为标签形式展示，常用于关键词输入、...
Laravel5.1 框架表单验证操作实例详解
12-20
`required`规则确保字段不为空，`min`规则则确保字段长度至少为指定的字符数。如果验证失败，Laravel会自动重定向回表单页面，并将错误信息存储在Session中。 为了显示这些错误信息，我们需要在`create.blade.php`...
HTML简单的示例--输入框空时错误提醒
山楂的博客
09-28 4535
<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title>输入框为空时错误提醒</title>   <style type="text/css">   &...
el-input字段为空时无法编辑的解决办法
iSmilee的博客
08-19 1095
页面如下： 正常字段有值的情况下返回的数据结构是这样： { code：200， data：{ wp: "123" wq: "123" } } 直接这样赋值 ⬇ this.dataInfo = response.data 这样绑定 ⬇ <el-input v-model="dataInfo.wq" /> 完全梅毛冰~ 但是！没有值时返回这样 { code：200， data：null } input绑定的model取不到他对应的字段！报错了！ 好办，那我判断一下，nul
<input>输入框提示输入内容
如风
08-02 5757
现在很多的网页的文本框都有灰色的提示文字，光标点入输入框则灰色提示内容就会消失，光标离开又出现（当然是在填写内容之前了），以下代码就可实现上述功能 。   将此段代码加入到标签中：   value="提示内容"onFocus="if(value==defaultValue){value='';this.style.color='#000'}"onBlur="if(!value){v
input无内容提交显示抖动提示效果
Tianxiaoxixi的博客
09-29 308
input无内容提交显示抖动提示效果
js判断是否input的输入值为空后为输入框设置红色提醒
大海无量的博客
09-03 2万+
&lt;input id="name" type="text" name="username" placeholder="请输入姓名" &gt; var name=$("#name").val(); if (name == '' || name == undefined || name == null){ //alert("请输入姓名"); $(&q
html input文本框 输入框提示（hint）内容的实现
热门推荐
王小磊
06-02 7万+
HTML开发中经常遇到input元素，往往又需要提示使用者输入一定规则的内容，这时最好的一个方法就是在input里面实现一个提示，实现如下方式：输入框为空时提示内容出现，当输入框获得焦点时或输入框不为空时则消失。 1.HTML5引入了新属性placeholder很容易实现 html input 输入框提示（hint）内容的实现 Postcode: 显示提示内容“
Element-ui表单验证验证失败,input内有内容仍然验证为空的问题,验证数值类型不一致问题
progrmmmm的博客
11-15 1万+
验证的key只能是数组内的某一个key,不能之间验证 格式: html: <el-form :model="nodeName(数组名)" ref="nodeName(数组名)"> <el-form-item prop="name(数组内的属性)" label="内容:" :label-width="formLabelWidth" :rules="[{ required: true, message: '不能为空'}]"> <el-input
dreamweaver 正则表达式为属性值加上双引号_IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3...
weixin_39519741的博客
11-23 213
9 novalidate novalidate是属性规定在提交表单时不应该验证form和input域。novalidate属性适用于的类型有：text、search、url、telephone、email、password、date pickers、range及color。用法如下： 这段代码中，我们为表单设置novalidate属性，使表单不验证提交，表单中的email和url文本域不必通...
html input不能为空验证
05-11
要验证HTML input是否为空，可以使用HTML5的required属性。将其添加到input标记中，即可强制要求用户在提交表单之前必须填写该字段。 例如： ``` <label for="name">Name:</label> <input type="text" id="name" name="name" required> ``` 这将会在提交表单时验证该字段是否为空，如果为空会提示用户填写该字段。您也可以使用JavaScript来进行验证。例如： ``` function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } } ``` 这是一个简单的JavaScript函数，它将验证表单中的名称字段是否为空。如果为空，它会显示一个警告框并返回false以防止表单提交。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值