js——form表单验证
2024-05-07 02:27:18
用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;//获取spanvar 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");//获取spanvar 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() {//获取提示语的spanvar span = document.getElementById("checkCodeSpan");//获取已经生成的验证码的spanvar 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() && checkAddress() && checkFav() &&checkCode();}/*-------------------------------------------------------------------------------------------------*///封装校验:相同的保留，不同的传参。function checkField(id, reg) {//获取用户数据var inp = document.getElementById(id);var va = inp.value;var alt = inp.alt;//创建校验规则//获取span对象var span = document.getElementById(id + "Span")//开始校验if (va == "" || va == null) {//输出校验结果span.innerHTML = alt + "不能为空";span.style.color = "red";return false;} else if (reg.test(va)) {//输出校验结果span.innerHTML = alt + "ok";span.style.color = "green";return true;} else {//输出校验结果span.innerHTML = alt + "不符合规则";span.style.color = "red";return false;}}</script></head><body onload="createCode()"><div id="showdiv"><form action="#" method="get" onsubmit="return checkSub()"><table><tr><td width="80px">用户名:</td><td width="200px"><input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名" /><span id="unameSpan">*2-4位汉字</span></td></tr><tr><td>密码:</td><td><input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()" /><span id="pwdSpan"></span></td></tr><tr><td>确认密码:</td><td><input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()" /><span id="pwd2Span"></span></td></tr><tr><td>手机号:</td><td><input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()" /><span id="phoneSpan"></span></td></tr><tr><td>邮箱：</td><td><input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()" /><span id="mailSpan"></span></tr><tr><td>性别</td><td>男 <input type="radio" name="sex" id="sex" value="0" checked="checked" />女 <input type="radio" name="sex" id="sex" value="1" /></td></tr><tr><td>籍贯:</td><td><select name="address" id="address" onchange="checkAddress()"><option value="0">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option><option value="5">武汉</option></select><span id="addressSpan"></span></td></tr><tr><td>技能:</td><td><input type="checkbox" name="fav" id="" value="1" onclick="checkFav()" />java<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()" />mysql<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()" />linux<br /><input type="checkbox" name="fav" id="" value="4" onclick="checkFav()" />hadoop<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()" />spark<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />flink<span id="favSpan"></span></td></tr><tr><td>个人介绍:</td><td><textarea name="intro" rows="4" cols="40" id="intro"></textarea></td></tr><tr><td>验证码:</td><td><input type="text" name="code" id="code" value="" style="width: 100px;" onblur="checkCode()" /> <span id="codeSpan" onclick="createCode()" style="background-image: url(img/2.gif);color: black;"></span><span id="checkCodeSpan"></span></td></tr><tr><td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()" />是否同意本公司协议</td></tr><tr><td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled" /></td></tr></table></form></div></body>
</html>图片下载链接：
https://pan.baidu.com/s/1r4jFrjL97FBZH5lBhqcdVw
提取码：rkpl
js——form表单验证相关推荐
- php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- 整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
- 框架生成的HTML修改,Django框架form表单验证 修改html标签的样式
经过前面的学习,我们大致可以知道CharField.EmailField等等以Field结尾的方法,只能帮助我们对用户发来的信息做验证,不能生成html标签.字段本身自己虽然只做验证,但是我们可以通过 ...
- Django(part46)--form表单验证
学习笔记,仅供参考 文章目录 form表单验证 举个例子 form表单验证 form提供表单和字段验证,我们可以使用form.is_valid() 方法进行表单验证,若该方法返回值为True,则表示当 ...
- ant-pro使用Form表单验证上传图片出现的问题
1.复现:用antd的Form表单验证上传图片必填项时出现问题:复现过程,先提交,提示图片需要上传,上传成功后,依旧提示:图片未上传 2.表单验证原理:先理解一下antd的Form表单验证的表层原理, ...
- django Form表单验证
这一部分涉及到三个地方:前端表单设计,表单验证的Form类编写,解析函数Views编写: 文章目录 前端表单 表单验证的Form类编写 后端view函数 前端表单 新建一个form_test.html ...
- Django之Form表单验证组件Tyrion
Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...
- js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
最新文章
- python使用np.logspace函数在对数刻度上创建一个对数等距数组实战：在对数刻度上创建一个数组（指定数值个数以及是否包含末尾界值）、使用不同的基数（底数）在对数刻度上构建等距数组、可视化
- 征文 | “‘互联网+’背景下大数据与税收征管的深度融合研究” 专题征文启事...
- pycharm conda 环境 切换 linux_【Python专题(一)】python环境搭建
- java基础学习（一）方法
- ubuntu 安装 evpp
- SpringMVC+Spring+Mybatis整合，使用druid连接池，声明式事务，maven配置
- JVM源码分析之synchronized实现
- 分享一个CSS3的网格系统架构 - ResponsiveAeon
- sklearn、theano、TensorFlow 以及 theras 的理解
- ubuntu-server-18.04 设置开机启动脚本
- JS-DOM-节点-获取元素-文档结构-元素的属性
- input自适应_一种Dynamic ReLU：自适应参数化ReLU激活函数（调参记录13）
- 组素数 蓝桥填空题2013省赛
- 医疗大数据分析需考虑哪些因素
- 【渝粤教育】电大中专电子商务网站建设与维护作业 题库
- Spring 与 SpringMVC 容器父子关系引出的相应问题
- java设置user.dir_使用java系统属性user.dir读取配置文件
- JavaWeb的目录结构（1）
- Java库转oc,(java转行oc)什么是block，用java来解释oc中的block
- C# NOPI 项目实战(经典)(可下载项目源码)