用js实现一个简易的表单验证

效果:



代码:

<html>
<head>
<title>js校验form表单</title>
<meta charset="UTF-8" />
<!--声明css代码域-->
<style type="text/css">
/*设置背景图片*/
body {
background-image: url(img/1.jpg);
background-size: cover;
}

/*设置tr样式*/
tr {
height: 40px;
}

/*设置div样式*/
#showdiv {
border: solid 1px #FF0000;
border-radius: 10px;
width: 500px;
margin: auto;
margin-top: 40px;
}

/*设置table*/
table {
margin: auto;
color: white;
}

span {
font-size: 13px;
}

#codeSpan {
font-size: 20px;
}
</style>
<!--声明js代码域-->
<script type="text/javascript">
//常见验证码
function createCode() {
//创建随机四位数字
var code = Math.floor(Math.random() * 9000 + 1000);
//获取元素对象
var span = document.getElementById("codeSpan");
//将数字存放到span中
span.innerHTML = code;
}
//验证用户名
function checkUname() {
//获取用户的用户名信息
var uname = document.getElementById("uname").value;
//创建校验规则
var reg = /^[\u4e00-\u9fa5]{2,4}$/
//获取span对象
var span = document.getElementById("unameSpan");
//开始校验
if (uname == "" || uname == null) {
//输出校验结果
span.innerHTML = "用户名不能为空";
span.style.color = "red";
return false;
} else if (reg.test(uname)) {
//输出校验结果
span.innerHTML = "用户名ok";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = "用户名不符合规则";
span.style.color = "red";
return false;
}

}
//验证密码
function checkPwd() {
//获取用户的密码信息
var pwd = document.getElementById("pwd").value;
//创建校验规则
var reg = /^[a-z]\w{5,7}$/;
//获取span对象
var span = document.getElementById("pwdSpan");
//开始校验
if (pwd == "" || pwd == null) {
//输出校验结果
span.innerHTML = "*密码不能为空";
span.style.color = "red";
return false;
} else if (reg.test(pwd)) {
//输出校验结果
span.innerHTML = "*密码ok";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = "*密码格式不正确";
span.style.color = "red";
return false;
}
checkPwd2();
}
//校验确认密码
function checkPwd2() {
//获取第一次密码
var pwd = document.getElementById("pwd").value;
//获取确认密码
var pwd2 = document.getElementById("pwd2").value;
//获取span对象
var span = document.getElementById("pwd2Span");
//比较两次密码是否相同
if (pwd2 == "" || pwd2 == null) {
span.innerHTML = "确认密码不能为空";
span.style.color = "red";
return false;
} else if (pwd == pwd2) {
span.innerHTML = "确认密码ok";
span.style.color = "green";
return true;
} else {
span.innerHTML = "两次密码不一致";
span.style.color = "red";
return false;
}
}
//校验手机号
function checkPhone() {
return checkField("phone", /^1[3,4,5,7,8]\d{9}$/);
}
//校验邮箱
function checkMail() {
return checkField("mail", /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/)

}
//校验籍贯
function checkAddress() {
//获取用户选择的数据
var sel = document.getElementById("address").value;
//获取span
var span = document.getElementById("addressSpan");
//校验
if (sel != 0) {
span.innerHTML = "籍贯选择成功";
span.style.color = "green";
return true;
} else {
span.innerHTML = "籍贯不能为请选择";
span.style.color = "red";
return false;
}

}
//校验技能
function checkFav() {
//获取所有的技能
var favs = document.getElementsByName("fav");
//获取span
var span = document.getElementById("favSpan");
//遍历
for (var i = 0; i < favs.length; i++) {
if (favs[i].checked) {
span.innerHTML = "技能选择成功";
span.style.color = "green";
return true;
}
}

span.innerHTML = "技能至少选则一项";
span.style.color = "red";
return false;

}

//校验验证码
function checkCode() {
//获取提示语的span
var span = document.getElementById("checkCodeSpan");
//获取已经生成的验证码的span
var span2 = document.getElementById("codeSpan");
var code = span2.innerHTML;
//获取输入值
var inp = document.getElementById("code").value;
//开始校验
if (code == inp) {
//输出校验结果
span.innerHTML = "*验证码正确";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = "*验证码不正确";
span.style.color = "red";
return false;
}
}
//校验是否同意公司协议
function checkAgree() {
document.getElementById("sub").disabled = !document.getElementById("agree").checked;
}
//提交判断
function checkSub() {
checkUname();
checkPwd();
checkPwd2();
checkPhone();
checkMail();
checkAddress();
checkFav();
checkCode();
return checkUname() && checkPwd() && checkPwd2() && checkPhone() && checkMail(

js——form表单验证的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. django之form表单验证

    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...

  3. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  4. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  5. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  6. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  7. Bootstrap学习总结笔记(24)-- 基于BootstrapValidator的Form表单验证

    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...

  8. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

  9. Django(5) session登录注销、csrf及中间件自定义、django Form表单验证(非常好用)

    一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5 ...

随机推荐

  1. Linux的一些命令(CentOS7)

    注:下面的文件名和文件夹名字都支持通配符 init 0:关机 init 6:重启 clear:清屏 ip addr:查看ip地址 passwd 用户名:修改指定用户的密码 时间相关的命令: date: ...

  2. nginx介绍以及nginx的反向代理

    什么是nginx? Nginx 是一个高性能的轻量级的HTTP和反向代理服务器,也是一个邮件服务器. 下载地址 本人使用的是Tengine,它是由淘宝网发起的Web服务器项目.它在Nginx的基础上, ...

  3. PHP POST请求 字符串和数组传值的区别

    最近工作中需要请求一个API,由于之前接过类似的就直接拿来写好的函数使用.但数据死活就是传不过去,一只返回err. 代码如下: function post_params($url, $params,$ ...

  4. java并发基础知识

    这几天全国都是关键时候,放假了,还是要学习啊!很久没有写博客了,最近看了一本书,有关于java并发编程的,书名叫做“java并发编程之美”,讲的很有意思,这里就做一个笔记吧! 有需要openjdk8源 ...

  5. MDC 输出线程信息帮助定位问题

    log4j中的%x ---NDC,%X---MDC 即%x NDC.clear();NDC.push(this.toString());%X{first} %X{last}MDC.put(" ...

  6. linux开机启动项问题。6版本与7版本不同之处 。

    参考 网址:https://blog.csdn.net/weixin_41909810/article/details/82775247

  7. logback.xml设置mogodb日志打印控制台

    <logger name="org.springframework.data.mongodb.core" level="DEBUG"/>

  8. 微权获取openid信授

    (1)首页要有一个自己的微信测试号的appid和秘钥 (2)公司里都是后台传code(接口),获取openid(接口) 请求code接口:/Wechat/GetUserInfo/getCode //判 ...

  9. 吴裕雄--天生自然TensorFlow2教程:反向传播算法

  10. 2.4G芯片

    一 南京中科微: Si24R1GFSK无线收发芯片    Si24R1专为低功耗无线通信应用场合设计.工作频率为2400MHz-2525MHz,共有126个1MHz带宽的信道:典型应用:有源RFID. ...