Html利用函数输入学生的性别,JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)...
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
发布时间:2020-10-08 04:15:08
来源:脚本之家
阅读:73
作者:水山奇
问题:表单怎么在输入后立即验证,而不是提交后再验证那么不方便(网上搜到的要么是模棱两可,要么是残缺不全…)
方法:鉴于此,加上我个人的理解(注释)在上面。
截图:
代码:
用户注册
//及时验证用户名
function checkuse(){
//在每个函数中定义check变量是为了在表单提交后,能够逐个验证每个函数是否通过,很好很好。(以下同理)
var check;
var username = document.getElementById("username").value;
if (username.length > 18 || username.length < 6) {
alert("用户名输入不合法,请重新输入!");
//此处甚妙,既然你在此处输入错误,那么按理说当然要在此处继续输入了。(在此处继续获取焦点!)
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √";
check = true;
}
return check;
}
//利用正则表达式判断密码符合否
function checkpwd() {
var check;
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 18 || regs.test(password)) {
alert("密码输入不合法,请重新输入!");
document.getElementById("password").focus();
check = false;
} else {
document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成,且必须包含字母、数字和标点符号 √";
check = true;
}
return check;
}
//验证密码是否不一致!
function checkpwdc() {
var check;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
alert("两次输入密码不一致,请重新输入!");
document.getElementById("pwdc").focus();
check = false;
} else {
document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √";
check = true;
}
return check;
}
//提交时验证用户类别
function checkut(){
var check;
if(document.getElementById("selUser").selectedIndex == 0)
{
alert("请选择用户类型!");
document.getElementById("selUser").focus();
check = false;
}else{
document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √";
check = true;
}
return check;
}
//提交时验证用户性别
function checkGender(){
var check;
var gender = "";
//获取所有名称为sex的标签
var sex = document.getElementsByName("sex");
//遍历这些名称为sex的标签
for(var i=0;i
//如果某个sex被选中,则记录
if(sex[i].checked)
gender = sex[i].value;
}
if(gender == "")
{
alert("请选择性别!");
check = false;
}else{
document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √";
check = true;
}
return check;
}
//及时验证出生日期
function checkDate(){
var check;
if(document.getElementById("txtDate").value ==""){
alert("请填写出生日期!");
document.getElementById("txtDate").focus();
check = false;
}else{
document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √";
check = true;
}
return check;
}
//及时验证兴趣爱好
function checkHobby(){
var check;
var hobby = 0;
//objNum为所有名称为hobby的input标签
var objNum = document.getElementsByName("hobby");
//遍历所有hobby标签
for(var i=0;i
//判断某个hobby标签是否被选中
if(objNum[i].checked==true)
hobby++;
}
//如果有选中的hobby标签
if(hobby >=1){
document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √";
check = true;
}else{
alert("请填写爱好!");
check = false;
}
return check;
}
//正则表达式验证电子邮件(及时)
function checkemail(){
var check;
//电子邮件的正则表达式
var e1 = document.getElementById("email").value.indexOf("@",0);
var e2 = document.getElementById("email").value.indexOf(".",0);
if(email == "" || (e1==-1 || e2==-1) || e2
{
alert("E_mail输入错误!");
document.getElementById("email").focus();
check = false;
} else {
document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL,将用于密码找回 √";
check = true;
}
return check;
}
//及时验证自我介绍
function checkintro(){
var check;
var intro = document.getElementById("introduction").value;
if (intro.length > 100) {
alert("字数超限!");
check = false;
} else {
document.getElementById("checktext9").innerHTML = "* 限100字内 √";
document.getElementById("checktext9").focus();
check = true;
}
return check;
}
//提交表单时所有都验证一遍(若任何一个验证不通过,则返回为false,阻止表单提交)
function check() {
var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
&& checkemail() &&checkintro();
return check;
}
表单及时验证小例子
用户名: | * 用户名由6-18位字符组成 | |
密码: | * 密码由6-18位字符组成,且必须包含字母、数字和标点符号 | |
确认密码: | * 请再次输入你的密码 | |
用户类型: |
请选择 管理员 普通用户 |
* 请选择用户类型 |
性别: |
男 女 |
* 请选择你的性别 |
出生日期: | * 请选择你的出生日期 | |
兴趣爱好: |
阅读 音乐 运动 |
* 请选择你的兴趣爱好 |
电子邮件: | * 请填写常用的EMAIL,将用于密码找回 | |
自我介绍: | 这是自我介绍... | * 限100字内 |
CSS样式:
input:focus,textarea:focus{
border:1px solid #f00;
background:#fcc;
}
textarea{
width:230px;
height:50px;
}
body
{
font-size:15px;
/* 字体的样式 */
font-family:Microsoft YaHei;
}
select option{
font-size:10px;
font-family:Microsoft YaHei;
}
以上所述是小编给大家介绍的JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
Html利用函数输入学生的性别,JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)...相关推荐
- 一个跟jquery serializeArray()一起使用的函数,主要来方便提交表单。
一个跟jquery serializeArray()一起使用的函数,主要来方便提交表单. .serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSO ...
- Web:学生课程表表格/用户注册表单
一.学生课程表 1.课程表模样 2.课程表html代码块 <!DOCTYPE html> <html lang="en"><head><m ...
- 怎么在表单提交前检查数据输入。
首先,在form中加入οnsubmit= return 检查输入的事件, 例如,检查函数名字是CheckInput(), 则这里输入为οnsubmit="return CheckInput( ...
- 利用策略模式与装饰模式扩展JavaScript表单验证功能
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/55097262 ...
- php表单输入内容换行,PHP获取表单textarea数据换行用法示例
这篇文章主要为大家详细介绍了PHP获取表单textarea数据换行用法示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编小韵来看看吧!测试页面代码: 代码如下: ...
- Vue—表单的输入绑定,绑定Vue3表单的输入
目录 文本框 选择框 更改绑定显示的值 修饰符 .lazy .number .trim v-model 指令用来在 input.select.textarea.checkbox.radio 等表单控件 ...
- php表单的输出,php – Joomla输入表单字段输出
我想做的就是给joomla输入表单提供基本的bootstrap样式: some text 我使用带有less的mixin将样式应用于现有的输入类 //input form fields .valida ...
- 一个html表单赋给另一个表单,是否可以将表单输入到另一个html表单
我目前正试图通知用户他们输入的表单详细信息.我不太清楚如何进行这项工作,但我想做的是1个html文件有"表单"和在action="htmlfile2.url"中 ...
- Element UI进行表单校验的时候,输入正确内容后,还有提示问题
问题:表单中输入正确的内容后,还提示请输入内容 部分代码如下: // 表单 <el-dialog title="添加用户" :visible.sync="dialo ...
最新文章
- 如何用ipad制作精美的视频,并发布到视频网站
- 计算机视觉及机器学习论文、源代码合集
- Linux基础-1.0共享文件夹创建
- 计算机专业单元测试卷答案,银保监会考试题库:计算机类模拟试题练习(六)答案...
- linkedin api php,php – 如何使用linkedin api发送消息/通知?
- EF 保证线程内唯一 上下文的创建
- 数组 -- removeElement -- 图解
- matlab系统稳定性仿真实验,基于Matlab的电力系统暂态稳定仿真实验与分析
- tp6 api请求返回参数统一配置方法
- Python——顺序结构
- My second page-数组删除 —— By Nicolas
- 7个Python环境管理工具
- 【其它】怎样开启Win7快速启动栏
- 深度解析上海互联网产业为何沉沦
- ESLint 报 ‘require‘ is not defined no-undef
- iOS 模拟微信内置浏览器CYWebViewController
- 基于分位数随机森林预测模型QRF建立多特征输入单个因变量输出的拟合预测模型
- 短视频的地方搞笑配音怎么做?分享一个小技巧,不会方言也能配
- 百度智能云在线活体检测
- JULIA学习材料合集
热门文章
- Java----映射 map
- 计算机软件行业的环境评估,计算机软件评估研究
- 802.1X与portal的无线认证
- Firefox(火狐)好用的插件
- c++中的typename与class
- python opencv 直方图均衡_深入理解OpenCV+Python直方图均衡化
- Idea将Java文件导出jar包
- 关于使用正则表达式进行文本替换
- 错误代码: SEC_ERROR_REUSED_ISSUER_AND_SERIAL(解决办法)
- Vdbench:解决多台服务器联机运行时,出现的常见问题记录2