校验表单demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script> //用户名的规则： 第一位是字母，只有由数字与字母 组成，6位。
function checkName(){
//获取到了用户名的值
var userName = document.getElementById("username").value;
var userSpan = document.getElementById("userId");
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(userName)){
//符合规则
userSpan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
userSpan.innerHTML="错误".fontcolor("red");
return false;
}
} //校验密码 6位
function checkPass(){
var password = document.getElementById("pwd").value;
if(password.length>0){
var reg = /^\w{6}$/;
var passSPan = document.getElementById("passId");
if(reg.test(password)){
//符合规则
passSPan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
passSPan.innerHTML="错误".fontcolor("red");
return false;
}
} } //检验密码是否正确
function ensurepass(){
var password1 = document.getElementById("pwd").value; //第一次 输入的密码
var password2 = document.getElementById("ensurepwd").value;
if(password2.length>0){
var enSpan = document.getElementById("ensure");
if(password1.valueOf()==password2.valueOf()){
enSpan.innerHTML="正确".fontcolor("green");
return true;
}else{
enSpan.innerHTML="错误".fontcolor("red");
return false;
}
}
} //校验邮箱
function checkEmail(){
var email = document.getElementById("email").value;
var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i; // .com .com.cn
var emailspan = document.getElementById("emailspan");
alert(reg.test(email));
if(reg.test(email)){
//符合规则
emailspan.innerHTML="正确".fontcolor("green"); return true;
}else{
//不符合规则
emailspan.innerHTML="错误".fontcolor("red");
return false;
}
} //校验兴趣爱好： 至少要算中其中 的 一个。
function checkHoby(){
var likes = document.getElementsByName("like");
var hobySpan =document.getElementById("hobbySpan")
var flag = false;
for(var i = 0 ; i<likes.length ; i++){
if(likes[i].checked){
flag =true;
break;
}
} if(flag){
//符合规则
hobySpan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
hobySpan.innerHTML="错误".fontcolor("red");
return false;
}
} //总体校验表单是否可以提交了 如果返回的true表单才可以提交。 上面的表单项必须要每个都填写正确。
function checkForm(){
var userName = checkName();
var pass = checkPass();
var ensure = ensurepass();
var email = checkEmail();
var hoby = checkHoby();
if(userName&&pass&&ensure&&email&&hoby){
return true;
}else{
return false;
} } </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
</head>
<body>
<form action="success.html" method="get" onsubmit="return checkForm()"> <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->
<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:</td>
<td>
<input type="text" name="username" id="username" onblur="checkName()"/>
<span id="userId"></span>
</td>
</tr>
<tr>
<td >密码:</td><td>
<input type="password" name="pwd" id="pwd" onblur="checkPass()"/>
<span id="passId"></span>
</td>
</tr>
<tr>
<td>确认密码:</td><td>
<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure"></span>
</td>
</tr>
<tr>
<td>邮箱</td><td>
<input type="text" name="email" id="email" onblur="checkEmail()"/>
<span id="emailspan"></span> </td>
</tr>
<tr>
<td>性别</td><td>
<input type="radio" checked="ture" name="gender" id="male" value="male"/>
男
<input type="radio" name="gender" value="female"/> 女</td>
</tr> <tr>
<td>爱好:</td><td>
<input type="checkbox" checked="checked" name="like" />
eat
<input type="checkbox" name="like" />
sleep
<input type="checkbox" name="like"/>
play
<span id="hobbySpan"></span>
</td>
</tr>
<tr>
<td>城市</td><td>
<select name="city" id="city">
<option value=""> 请选择</option>
<option value="bj"> 北京 </option>
<option value="gz"> 广州 </option>
<option value="sh"> 上海 </option>
</select> </td>
</tr>
<tr>
<td>自我介绍</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><!--提交按钮-->
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
校验表单demo的更多相关文章
- jQuery form插件的使用--使用 fieldValue 方法校验表单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- Spring Boot (一) 校验表单重复提交
一.前言 在某些情况下,由于网速慢,用户操作有误(连续点击两下提交按钮),页面卡顿等原因,可能会出现表单数据重复提交造成数据库保存多条重复数据. 存在如上问题可以交给前端解决,判断多长时间内不能再次点 ...
- javascript将异步校验表单改写为同步表单
同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需 ...
- Spring Boot构建的Web项目如何在服务端校验表单输入
本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC ...
- 使用JavaScript策略模式校验表单
表单校验 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表 ...
- jQuery校验 表单验证
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结
1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...
- 创建简单的表单Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 蓝牙App漏洞系列分析之三CVE-2017-0645
蓝牙App漏洞系列分析之三CVE-2017-0645 0x01 漏洞简介 Android 6月的安全公告,同时还修复了我们发现的一个蓝牙 App 提权中危漏洞,该漏洞允许手机本地无权限的恶意程序构造一 ...
- 微信小程序音乐播放器
写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...
- 四、Attribute（2）授权角色过滤器
一.授权过滤器 1.新建一个mvc 项目 2.首先创建一个过滤器 MyAuthorizeAttribute 继承AuthorizeAttribute,并重写 AuthorizeCore public ...
- 记一下拷贝windows下文件到linux下的方法
去官网下载的Putty中包含了如下文件: 其中pscp.exe是一个远程复制文件的工具. 官网:https://www.chiark.greenend.org.uk/~sgtatham/putty/l ...
- CSS——简写属性（在padding和margin这样的简写属性中，值赋值的顺序是top、right、bottom、left）
/* 在padding和margin这样的简写属性中,值赋值的顺序是top.right.bottom.left. 它们还有其他简写方式,例如给padding两个值,则第一个值表示top/bottom, ...
- Java 包装类及其与String转换、进制转换
一.包装类 1.基本类型和引用类型 Java中的基本类型我们都知道有8种,但是作为基本类型限制功能的发挥,例如整形转String类型等可能需要类方法实现会更加简便.那么八个基本类型对应八个包装类,即引 ...
- Zabbix Server安装指南
监控模板网站 在https://share.zabbix.com/,提供了各种各样的监控模板,可以自行搜索,套用.
- 强大的Visual Studio插件CodeRush全新发布v19.2，助力VS开发
CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume- ...
- addClass(class|fn)
addClass(class|fn) 概述 为每个匹配的元素添加指定的类名.深圳dd马达 参数 classStringV1.0 一个或多个要添加到元素中的CSS类名,请用空格分开 function ...
- SQL中where in的用法
首先我们要知道where是什么:一个判断符.在SQL操作中,控制只选择指定的行. in的其实归类于特殊的比较运算符 expr1 between expr2 and expr3:表示expr1的值在ex ...