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进行封装 ...
随机推荐
- mysql 1215错误 外键建立失败
在Mysql中创建数据表时,经常会遇到问题而失败,其中建立外键有很多细节需要我们去留意,主要有以下几种常见原因. 1. 两个字段的类型或者大小不严格匹配.例如,如果一个是int(10),那么外键也必 ...
- 个人项目(C语言)
GitHub地址:https://github.com/dachai9/personal-project.git 1. WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数 ...
- 分享一个关于Cookie做的实验结果
实验本身是很枯燥的,我尽量把它讲的有趣些. 起因 去网上搜了下关于Cookie的介绍,看了好几篇都长得很一样,阉割一下内容不外乎说是"不同浏览器限制cookie数不同,大致在30-50这个范 ...
- python爬虫之多线程、多进程+代码示例
python爬虫之多线程.多进程 使用多进程.多线程编写爬虫的代码能有效的提高爬虫爬取目标网站的效率. 一.什么是进程和线程 引用廖雪峰的官方网站关于进程和线程的讲解: 进程:对于操作系统来说,一个任 ...
- 使用script打开页面
<script src="x" onerror=javascript:window.open("http://192.168.38.1/csrf.html" ...
- NGUI List优化
腾讯是如何做 Unity 手游性能优化的 https://juejin.im/entry/5774af485bbb50005925a3b1 Unity - NGUI - 优化ScrollView的一些 ...
- 初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机
[playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...
- 如何使用zabbix监控公网环境的云服务器（从小白到高级技术顾问！！！）
问题:当我们在本地部署了一台Zabbix服务器后,想要对云上的服务器做监控.但是zabbix一个在内网,云服务器一个在公网,网络环境不同该如何解决?能否检测到云服务器数据? 思路:使用NAT技术,将本 ...
- 跟着尚硅谷系统学习Docker-【day05】
day05-20200717 p21.docker容器数据卷容器 就是活动硬盘上面挂载硬盘进行数据的传递. [docker run -it --name dc01 fyr/centos ...
- Oracle12C配置对外访问
Oracle12C配置对外访问 第一步: 开放端口或者关闭防火墙 第二步: 配置Oracle net manager打开Net manager 修改为共享服务器 第三步: 配置连接数打开Databas ...