开发总结--表单之验证

关于表单验证,网上很多,但是真正自己写的时候问题很多,所以这时你就需要一个适合新学者的表单验证方法,能让你快速的进行验证,不必要去摘抄别人自己都看不懂的代码,下面就为大家来总结几个常见的简单易上手的验证方式:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function beforesubmit() {
if (document.form1.zh.value == "") {
alert("请输入用户名!");
document.form1.zh.focus();
return false;
}
if (form1.zh.value.length < 6 || form1.zh.value.length > 20) {
alert("用户名应该在6-20之间!");
document.form1.zh.focus();
return false;
}
if (document.form1.mm.value == "") {
alert("请输入密码!");
document.form1.mm.focus();
return false;
}
if (document.form1.mm.value != document.form1.mm2.value) {
alert("两次输入密码不一致!");
document.form1.mm2.focus();
return false;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" onsubmit="return beforesubmit()">
<table width="400" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#ADD8E6">
<tr>
<td width="196">
<p align="right">账号:</p>
</td>
<td width="499">
<input name="zh" type="text" id="zh" />
</td>
</tr>
<tr>
<td>
<p align="right">密码:</p>
</td>
<td class="xinghao">
<input name="mm" type="password" id="mm" />
</td>
</tr>
<tr>
<td>
<p align="right">确认密码:</p>
</td>
<td class="xinghao">
<input name="mm2" type="password" id="mm2" />
</td>
</tr>
<tr>
<td></td>
<td>    </td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="确认" />
<input type="reset" name="Submit2" value="我重写" />
</td>
</tr>
</table>
</form>

</body>

</html>

///////////////////////////////////////////

以上这个也是我自己总结的验证方式,还有2个自己总结的,以后开发遇到了别的需要验证的,还会继续添加验证方式,现在是最简单比较适合新手的验证方式,自己可以去揣摩

下边跟上边的编码格式是一样的,没有太大的区别

var re = /^(13[0-9]{9})|(15[89][0-9]{8})$/;
if (!re.test(document.tijiao.shoujinum.value)) {
alert(‘请输入正确的手机号码‘);
document.tijiao.shoujinum.focus();
return false;
};
var patten = new RegExp(/^[0-9]+$/);
if (!patten.test(document.tijiao.num.value)) {
alert("请输入数字");
document.tijiao.num.focus();
return false;
}

///以上都是自己开发中用到过的,不会存在出现错误的情况,如果出现,请检查字幕的拼写或者传参是否正确///

时间: 2024-10-16 20:59:17

开发总结--表单之验证的相关文章

开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm

10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub").Validform(),那么demo对象会有以下属性和方法可以调用: tipmsg[object] 如:demo.tipmsg.s="error! no messageinputed."; 通过该对象可以修改除 tit 以外的其他提示文字,这样可以实现同一个页面的不同表单使用不同的提示文字. 具体可修改的提示文字 $.Tipmsg={//默认提示文字; tit:

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

ajax提交表单无法验证easyui的验证选项(比如required等)

在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情. 解决办法:使用jquery中ajax的beforeSend事件(这需要与easyui框架协同使用),例如:   submitForm:function(formId,url){ var formData = $(formId).form('getValues'); // 获取表单数据 $.ajax({ type:'POST', url:url, data:{for

开发指南专题九:JEECG微云快速开发平台-表单校验组件ValidForm

开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的).(之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了) 2.引入js (jquery 1.4.2

开发指南专题九 JEECG微云快速开发平台-表单校验组件ValidForm

开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的).(之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了) 2.引入js (jquery 1.4.2

PHP学习记录之表单的验证

1.表单的验证的小案例 HTML表单 <!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> <meta http-e

HTML 表单和验证事件

HTML 表单和验证事件 1.表单验证<form></form> (1)非空验证(去空格) (2)对比验证(跟一个值对比) (3)范围验证(根据一个范围进行判断) (4)固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证:需要用到正则表达式来进行验证. (5).其它验证 2.正则表达式 用符号来描述书写规则:/ 中间写正则表达式 / ^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾 \d:一个任意的数字 \w:一个任意的数字或字母 \s: {n}

表单的验证:客户端验证和服务器端验证

表单的验证:客户端验证和服务器端验证 表单的确认 客户端确认: 减少服务器负载 缩短用户等待时间 兼容性难 服务器端确认: 统一确认 兼容性强 服务器负载重 客户端验证例子 首先建立一个表单,在其提交时用JavaScript方法进行验证,若该方法返回true,则进行表单的提交,若返回false,则表单不提交. <!-- 表单提交时执行JavaScript方法validate(),如果该方法返回false,那么表单是不会提交的 --> <form onsubmit="return

Thinkphp表单自动验证

之前项目经常用到,没做总结. 自动验证是Thinphp模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 原理: create()方法收集表单($_POST)信息并返回,同时触发表单自动验证,过滤非法字段, 在控制器中使用create()方法,(返回值为true/false),会自动触发模型类中的$_validate属性(为父类Model中的方法,在子类Model中重写),在$_validate中自定义验证规则(验证规则下面会详细说明),当create()方