静态页面表单中js验证
笔记:
1.
onblur事件:onblur 事件会在对象失去焦点时发生。http://www.w3school.com.cn/jsref/event_onblur.asp
onkeyup事件:onkeyup 事件会在键盘按键被松开时发生。http://www.w3school.com.cn/jsref/event_onkeyup.asp
这两者事件的发生机制截然不同,在用js对表单进行验证的时候,建议大家,尽量用onkeyup,因为交互性好,能够实时反馈用户输入的有效性;
2.
js中空字符串“” 是等于false ,大家可以测试下,alert(“”==false);这点,一定要注意;
3.
js方法的返回值,以及return;(跟java、C#等等,一样)。return可以直接跳出方法。
4.
对于表单验证,数据ok了,怎么提交,如果数据不对,怎么让表单不提交。
<input type="submit" value="提交数据">
<input type="button" value="提交数据">
5.
如何利用onclick 和onsubmit 以及form.submit方法,以及什么时候用最好;
onclick事件:onclick 事件会在对象被点击时发生。请注意, onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。http://www.w3school.com.cn/jsref/event_onclick.asp
onsubmit事件:onsubmit 事件会在表单中的确认按钮被点击时发生。http://www.w3school.com.cn/jsref/event_onsubmit.asp
form.submit(Html DOM submit):submit() 方法把表单数据提交到 Web 服务器。http://www.w3school.com.cn/jsref/met_form_submit.asp
上面的东西,经常用到,参考链接的讲解以及实例
function check() { // 表单提交时执行, 验证所有表单项
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
var bEmail = checkEmail();
var bCity = checkCity();
var bGender = checkGender();
var bInterest = checkInterest();
var result = bUsername && bPassword && bConfirm && bEmail && bCity && bGender && bInterest;
return result; // 如果所有表单项都验证成功, 返回true
} function checkUsername() {
var value = document.getElementById("username").value; // 获取input, 获取值
value = trim(value); // 去掉前后空白
var span = document.getElementById("usernameMsg"); // 获取SPAN
var msg = ""; // 错误消息
var regex = /^\w{1,10}$/; // 正则表达式: 字母数字下划线, 1到10位
if (!value) // 判断输入值是否为空
msg = "用户名必须填写"; // 如果是空的, 那么修改错误消息
else if (!regex.test(value)) // 如果不能匹配正则
msg = "用户名不合法";
span.innerHTML = msg; // 把错误消息放入SPAN
span.parentNode.parentNode.style.color = msg ? "red" : "black"; // 根据是否包含错误提示, 改变tr颜色
return msg == ""; // 如果没有错误消息, 代表验证成功
}
function checkPassword() {
var value = document.getElementById("password").value;
var span = document.getElementById("passwordMsg");
var msg = "";
var regex = /^.{6,16}$/;
if (!value)
msg = "密码必须填写";
else if (!regex.test(value)) // 如果不能匹配正则
msg = "密码不合法";
span.innerHTML = msg;
span.parentNode.parentNode.style.color = msg ? "red" : "black";
return msg == "";
}
function checkConfirm() {
var confirmValue = document.getElementById("confirm").value;
var passwordValue = document.getElementById("password").value;
var span = document.getElementById("confirmMsg");
var msg = "";
if (confirmValue != passwordValue)
msg = "密码必须保持一致";
span.innerHTML = msg;
span.parentNode.parentNode.style.color = msg ? "red" : "black";
return msg == "";
}
function checkEmail() {
var value = document.getElementById("email").value;
value = trim(value);
var span = document.getElementById("emailMsg");
var msg = "";
var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
if (!value)
msg = "邮箱必须填写";
else if (!regex.test(value))
msg = "邮箱格式不合法";
span.innerHTML = msg;
span.parentNode.parentNode.style.color = msg ? "red" : "black";
return msg == "";
}
function checkCity() {
var value = document.getElementById("city").value;
var span = document.getElementById("cityMsg");
var msg = "";
if (!value)
msg = "城市必须选择";
span.innerHTML = msg;
span.parentNode.parentNode.style.color = msg ? "red" : "black";
return msg == "";
}
function checkGender() {
var genderArr = document.getElementsByName("gender");
var span = document.getElementById("genderMsg");
var msg = "";
if (!genderArr[0].checked && !genderArr[1].checked)
msg = "性别必须选择";
span.innerHTML = msg;
span.parentNode.parentNode.style.color = msg ? "red" : "black";
return msg == "";
}
function checkInterest() {
var interestArr = document.getElementsByName("interest");
var span = document.getElementById("interestMsg");
var msg = "";
if (!interestArr[0].checked && !interestArr[1].checked && !interestArr[2].checked)
msg = "兴趣必须选择";
span.innerHTML = msg;
span.parentNode.parentNode.style.color = msg ? "red" : "black";
return msg == "";
}
// 利用正则去掉空字符串
function trim(s) { return s.replace(/^\s+|\s+$/g, ""); }
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/check.js"></script>
<script type="text/javascript"> </script> <h2>静态页面表单中js验证</h2>
<body>
<form action="~/HTML/success.html" method="get" id="form" onsubmit="return check();">
<table width="500" align="center" cellpadding="5" cellspacing="0">
<tr>
<td align="right" style="width:150px">用户名:</td>
<td>
<input type="text" name="username" id="username" onkeyup="checkUsername();">
<span id="usernameMsg"></span>
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td>
<input type="password" name="password" id="password" onkeyup="checkPassword();">
<span id="passwordMsg"></span>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td>
<input type="password" id="confirm" onkeyup="checkConfirm();">
<span id="confirmMsg"></span>
</td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td>
<input type="text" name="email" id="email" onkeyup="checkEmail();">
<span id="emailMsg"></span>
</td>
</tr>
<tr>
<td align="right">城市:</td>
<td>
<select name="city" id="city" onchange="checkCity();">
<option value="">-请选择城市-</option>
<option value="bj">西二旗</option>
<option value="cd">上地</option>
<option value="gz">西三旗</option>
<option value="sh">望京</option>
<option value="wh">回龙观</option>
<option value="sz"></option>
</select>
<span id="cityMsg"></span>
</td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input type="radio" name="gender" value="male" onclick="checkGender();"> 男
<input type="radio" name="gender" value="female" onclick="checkGender();"> 女
<span id="genderMsg"></span>
</td>
</tr>
<tr>
<td align="right">兴趣:</td>
<td>
<input type="checkbox" name="interest" value="sing" onclick="checkInterest();"> data2
<input type="checkbox" name="interest" value="dance" onclick="checkInterest();"> lol
<input type="checkbox" name="interest" value="mahjong" onclick="checkInterest();"> 炉石传说
<span id="interestMsg"></span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="提交数据">
</td>
</tr>
</table>
</form>
</body>
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
var bEmail = checkEmail();
var bCity = checkCity();
var bGender = checkGender();
var bInterest = checkInterest();
上面的方法的返回值是 return msg=="" 。返回的 boolean类型的值。
所以,后面才能用
var result = bUsername && bPassword && bConfirm && bEmail && bCity && bGender && bInterest;
return result; // 如果所有表单项都验证成功, 返回true
静态页面表单中js验证的更多相关文章
- Struts2(二)---将页面表单中的数据提交给Action
问题:在struts2框架下,如何将表单数据传递给业务控制器Action. struts2中,表单想Action传递参数的方式有两种,并且这两种传参方式都是struts2默认实现的,他们分别是基本属性 ...
- 静态页分页功能js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现HTML静态页传值的方法
JS实现HTML静态页传值的方法 作者:前端开发-武方博 发布:2012-10-29 分类:javascript 阅读:8,735次 此处使用JS方式实现静态页之间值传递,其实很简单,废话不多 ...
- JavaScript学习——使用JS完成注册页面表单校验
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...
- 把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进)
#把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成)
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...
- 九月二十八JS验证
js表单验证 js可用发来在数据被送往服务器前对HTML表单中的这些输入数据进行验证 被js验证的这些典型的表单数据有: >用户是否已填写表单中的必填项目: >用户输入的邮件地址是否是合法 ...
- SpringMVC接收页面表单参数-java-电脑编程网
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
随机推荐
- 【bzoj4236】JOIOJI STL-map
题目描述 JOIOJI桑是JOI君的叔叔.“JOIOJI”这个名字是由“J.O.I”三个字母各两个构成的. 最近,JOIOJI桑有了一个孩子.JOIOJI桑想让自己孩子的名字和自己一样由“J.O.I” ...
- SPOJ HIGH(生成树计数,高斯消元求行列式)
HIGH - Highways no tags In some countries building highways takes a lot of time... Maybe that's bec ...
- 【题解】CQOI2015任务查询系统
主席树,操作上面基本上是一样的.每一个时间节点一棵树,一个树上的每个节点代表一个优先级的节点.把开始和结束时间点离散,在每一棵树上进行修改.注意因为一个时间节点可能会有多个修改,但我们要保证都在同一棵 ...
- [Leetcode] Symmetric tree 对称二叉树
Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...
- Codeforces Round #531 (Div. 3) F. Elongated Matrix(状压DP)
F. Elongated Matrix 题目链接:https://codeforces.com/contest/1102/problem/F 题意: 给出一个n*m的矩阵,现在可以随意交换任意的两行, ...
- Lucene6去掉了Filter但是可以用BooleanQuery实现Filter查询
Lucene在6.0版本之后彻底废除了Filter的使用,采用BooleanQuery来实现Filter的功能,核心代码如下: TermQuery termQuery = new TermQuery( ...
- Spring发展史
https://www.cnblogs.com/RunForLove/p/4641672.html
- 关于jQuery.extend
这次来了解下jQuery的extend吧,作为菜鸟的我学艺不精,看插件时经常看到extend函数的使用,从网上看到一篇不错的介绍,特地转载过来留给自己收藏学习: ------------------- ...
- python判断操作系统
https://www.crifan.com/python_get_current_system_os_type_and_version_info/ 参考:https://stackoverflow. ...
- algorithm ch15 FastWay
这是DP最基础的一个问题,刚开始学习这一块,实现了一下,不要黑我巨长的参数表,新手. 代码如下: void FastWay(int l1[], int l2[], int e1, int e2, in ...