js实现表单验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
//验证码
function createCode(){
var code = Math.floor(Math.random()*9000+1000)
var span = document.getElementById("codeSpan")
span.innerHTML=code
return code
}
//验证用户名
function codeUser(){
return codedata("user",/^[\u4e00-\u9fa5]{2,4}$/)
}
//验证密码
function codePassword(){
return codedata("password",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/)
return codePassword2()
}
//校验密码
function codePassword2(){
//获取第一次密码
var pwd =document.getElementById("password").value
//获取第二次密码
var pwd2 =document.getElementById("password2").value
//比较两次密码是否相同
var span =document.getElementById("password2Span")
if(pwd2==""||pwd2==null){
span.innerHTML="确认密码不能为空"
return false
}else if(pwd2=pwd){
span.innerHTML="ok"
return true
}else{
span.innerHTML="两次密码不一致"
return false
}
}
//验证手机号
function codePhone(){
return codedata("phone",/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/)
}
//验证邮箱
function codeEmail(){
return codedata("email",/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)
}
//封装
function codedata(a,reg1){
//获取用户的用户信息
var user = document.getElementById(a).value
var span = document.getElementById(a+"Span")
var alt = document.getElementById(a).alt
//创建校验规则
var reg=reg1;
//校验
if(user==""|| user==null){
span.innerHTML=alt+"不能为空"
return false
}else if(reg.test(user)){
span.innerHTML=alt+"ok"
return true
}else{
span.innerHTML=alt+"不符合规则"
return false
}
} //验证籍贯
function codeCity(){
//获取用户选择的数据
var sel=document.getElementById("city").value; //获取span
var span=document.getElementById("citySpan");
//校验
if(sel!=0){
span.innerHTML="籍贯选择成功"
return true
}else{
span.innerHTML="籍贯不能为空"
return false
}
}
//验证爱好
function codeHobby(){
//获取爱好
var hobbys = document.getElementsByName("hobby")
var span = document.getElementById("hobbySpan")
for(var i =0;i<hobbys.length;i++){
if(hobbys[i].checked){
span.innerHTML="选择爱好成功"
return true
}
}
span.innerHTML="爱好至少选择一项"
return false
}
//校验是否同意公司协议
function checkAgree(){ document.getElementById("zc").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
codeUser();
codePassword();
codePassword2();
codePhone();
codeEmail();
codeCity();
codeHobby();
return codeUser()&&codePassword()&&codePassword2()&&codePhone()&&codeEmail()&&codeCity()&&codeHobby();
}
</script>
</head>
<body onload="createCode()">
<div>
<form name="" action="demo01.html" onsubmit="return checkSub()">
用户名：<input type="text" name="user" id="user" value="" onblur="codeUser()" alt="用户名"><span id="userSpan"></span><br>
密码：<input type="password" name="password" id="password" onblur="codePassword()" alt="密码"><span id="passwordSpan"></span><br>
确认密码：<input type="password" name="password2" id="password2" onblur="codePassword2()"><span id="password2Span"></span><br>
手机号：<input type="text" name="phone" id="phone" alt="手机号" onblur="codePhone()" alt="手机号"><span id="phoneSpan"></span><br>
邮箱：<input type="text" name="email" id="email" alt="邮箱" onblur="codeEmail()"><span id="emailSpan"></span><br>
性别： 男<input type="radio" name="sex" id="man" checked="checked">
女<input type="radio" name="sex" id="feman"><br>
籍贯：<select id="city" name="city" onchange="codeCity()">
<option value="0">-请选择-</option>
<option value="1">广州</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select><span id="citySpan"></span><br>
爱好：<input type="checkbox"name="hobby" value="lol" onclick="codeHobby()">LOL
<input type="checkbox"name="hobby" value="sleep" onclick="codeHobby()">睡觉
<input type="checkbox"name="hobby" value="eat" onclick="codeHobby()">吃饭
<input type="checkbox"name="hobby" value="listen" onclick="codeHobby()">听歌
<span id="hobbySpan"></span>
<br>
个人介绍:<textarea name="inc"></textarea><br>
验证码：<input type="text" name="code" id="code" ><span id="codeSpan" onclick="createCode()"></span><br>
<input type="checkbox"name="agree" id="agree" onclick="checkAgree()" >是否同意本公司协议<br>
<input type="submit" name="zc" id="zc" value="立即注册" disabled="disabled">
</form>
</div>
</body>
</html>
js实现表单验证的更多相关文章
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- 原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...
- js——form表单验证
用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- 原生js制作表单验证，基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
- JS实战 · 表单验证
思路: 1.定义页面 通过表格格式化表单: 表格行都有自己的背景颜色: 单元格中的数据(文本等)用div进行封装 ...
随机推荐
- 学习seo技术要不断地扩大思维和思路
http://www.wocaoseo.com/thread-148-1-1.html 目前学习seo技术的人员是越来越多了,通过查看seo这个词的指数,就能发现一些状况,从最初的每天3 ...
- 项目介入EF Core
目前.Net主流的ORM有SqlSugar.Entity Framework.Dapper,其它的我就不列举了.其实和Java那边ibatis相比,他们都比较轻量.之前用ibatis开发,真的很麻烦, ...
- Android开发值利用Intent进行put传值，setclass启动activity，并用get进行取值
传值方法一 [java] Intent intent = new Intent(); Bundle bundle = new Bundle(); //该类用作携带数据 bundle.putString ...
- 备份etc下的内容
echo "start backup..."sleep 3cp -av /etc/ /data/etc`date +%F`/echo "end backup"~ ...
- PlayerPrefs
PlayerPrefs http://blog.csdn.net/u011416077/article/details/47334963
- IMGUI
https://github.com/zwcloud/ImGui https://github.com/ocornut/imgui https://usingcpp.wordpress.com/201 ...
- 搭建lnmp环境，nginx的配置文件/etc/nginx/nginx.conf
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...
- JavaWeb三大器（过滤器、拦截器、监听器）概念梳理
最近工作碰到了一个问题:项目A需要收集项目B中的用户活跃数信息,最后通过HttpSessionAttributeListener实现.在开发过程中,网上查找了过滤器.拦截器.监听器的帖子,这里对自己收 ...
- Spring整合Quartz （cronTrigger和simpleTrigger实现方法）
Spring整合Quartz (cronTrigger和simpleTrigger实现方法) 之前有记录过一次springboot整合Quartz的文章,由于偶尔一次自己使用spring需要整合Qua ...
- 干货：用好这13款VSCode插件，工作效率提升10倍
文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 大家好我是lemon, 马上进入我们今天的主题吧. 又 ...