js函数、表单验证
惊天bug！！！在script里面只要有一点点错误，就都不执行了！！！所以每写一个方法，就跑一下，因为这个书写疏忽导致的bug不可估量！！！
【笑哭，所以我才这么讨厌js么，后来真心的是一点都不想再看见js这堆东西了。可能因为先接触的java吧。就觉得javascript万分不好。】
举例：
<script type="text/javascript">
function check(){
if(form.passwor1.value.length<6){
alert("密码不符合规范");
return false;
}
if(form.name.value==""){
alert("用户名不能为空");
return false;
}
}
</script>
</head>
<body>
<form name="form"action="鼠标事件.html" onsubmit="return check()">
用户名:<input type="text" name="name"/>
密码：<input type="password" name="password1"/>
确认密码：<input type="password" name="password2"/>
<input type="submit" value="提交"/>
</form> <script type="text/javascript">
function check(){
if(form.password1.value.length<6){
alert("密码不符合规范");
return false;
}
if(form.name.value==""){
alert("用户名不能为空");
return false;
}
}
</script>
</head>
<body>
<form name="form"action="鼠标事件.html" onsubmit="return check()">
用户名:<input type="text" name="name"/>
密码：<input type="password" name="password1"/>
确认密码：<input type="password" name="password2"/>
<input type="submit" value="提交"/>
</form>
就差一个字母d，就可以让js作废！！！
2015.11.30 js函数 +表单验证
复习：
1、js javascript 客户端脚本语言
他是运行在客户端浏览器的，它不是独立运行的，需要嵌入到html页面中运行。
有数据类型，但是在使用的时候不知名数据类型，因此属于弱数据类型。
2、js嵌入到html的页面中：
1）行级 2）业内 3）外部文件
onclick：事件触发，对js函数的调用
Script type text:javascript
Script: src 引入另外一个js文件
3、js数据类型：数字类型，字符、字符串类型，对象类型（js 是吧页面中所有的标签都看作是节点对象）
4、变量：声明 变量 命名规范，js区分大小写，不能用数字开头
Var i= 23；//弱数据类型语言
Var s = "";
全局变量 局部变量 （js 只有方法体 才是局部) 参数也算是局部
在方法体中，必须加var 如果不加，方法调用以后就会变成全局变量
5、方法的定义和调用
Function test(){}
Function test(number1,nubmer2){}
Var test3 = function(){return ;}
方法的调用，可以在script标签体中直接调用，也可以是行级引入的方式，来通过事件条用自定义函数。
6、alert() prompt() document write() paresInt() parseFloat()
document.getElementById();//得到页面中某个标签对象， 如果这个标签是 input 那么当前对象.value 就会获得 输出框中的值。
7、docuemnt.f.username 通过表单的名称获得表单对象，通过输入框的名称得到输入框对象
（.value)
8、document.getElementById(),获得一个标签对象，innerText innerHTML也可以赋值
9、简单计算器：获得select 的对象，并且再获得 被选中的option value
10、Js中的数组： array
Var s = new Array();
Var s2 = new Array(5);
Var s3 = new Array(3,4,5,);
Var s4 = new Array("nihao");
对数组的操作，s[2]=34;s2[0];
新的知识点：
1、js中函数，eval isNaN
2、Js中事件：鼠标；
3、表单验证（正则表达式）
作业：
1、表单验证；
2、把验证时候的警告框换成在对应输入框后面显示。
eval 计算表达式的值，言外之意，只要是表达式，就可以进行计算。
举例：
var s = "1+2+3+4+5";
alert(s);//结果：1+2+3+4+5
s = eval(s);
alert(s);//结果：15
举例：
var a = "1*2*3*4*5";
eval("result="+a);
alert("result");
alert(result);
这段代码还是要注意一下：
第一个只输出result
第二个输出：120.
他把结果计算完毕后赋给result。所以eval里面是一个表达式。不仅完成了计算，并完成了赋值，再次说明eval进行的是一个表达式的运算。
isNaN运算一个变量是否是不是一个数字。
var a="34";是数字，
isNaN(a) ->false
var b = "asdf"//不是数字
isNaN(b) ->true
onload()当body正在加载的时候会调用此函数，所以他放在body体上。
onchange() 当前对象发生更改的时候调用此函数。
onclick()鼠标点击事件。
onfocus()获得焦点事件
onblur()失去焦点事件
经典片段：
<script type="text/javascript">
function test(obj){
if(obj.value==""){
obj.value="请输入要查询的东西";
}else if(obj.value=="请输入要查询的东西"){
obj.value="";
}
}
</script>
</head>
<body>
<input type="text" value="请输入要查询的东西" onfocus="test(this)" onblur="test(this)"/>
</body>
然后注意一下关于正则表达式的使用。
正则表达式在java语言里面和在js语言中是有区别的。
Java：String 待测字符串 = "";
String regex = "";
待测字符串.matches(regex);
javaScript：
var regex = \^ $\;
var 待测字符串="";
regex.test(待测字符串);
两者返回的结果是一致的。表单验证的部分可以看看作为示例代码。
<!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-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function checkUser(){
var email = document.getElementById("email").value;
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!myreg.test(email)){
alert("邮箱的格式不正确!");
return false;
} var boxs = document.getElementsByName("box");
var number = 0;
for(var i = 0;i<boxs.length;i++){
if(boxs[i].checked == true){
number++;
}
}
if(number <3){
alert("至少选择3个以上包含3！");
return false;
} //var sexs = document.f.sex;
var sexs = document.getElementsByName("sex");
if(sexs[0].checked == false && sexs[1].checked == false){
alert("请选择性别");
return false;
} var username = document.getElementById("username");
if(username.value.length ==0){// username =="" username == null
alert("用户名不能空！");
username.focus();// 自动让你的输入框获得焦点
return false;
}
var ps = document.getElementById("ps");
if(ps.value.length<6 || ps.value.length > 12 ){
alert("密码规则不符！6----12");
ps.select();
return false;
}
var ps2 = document.getElementById("ps2");
if(ps2.value!= ps.value){
alert("两次输入的不一致!");
return false;
}
var age = document.getElementById("age");
if(isNaN(age.value)){
alert("你的年龄是非法的！");
return false;
} }
</script>
</head> <body>
<form name="f" action="demo.html" onsubmit="return checkUser()">
用户名:<input type="text" name="username" id="username"/>
<br/>
密码:<input type="password" name="ps" id="ps"/>
<br/>
确认密码:<input type="password" name="ps2" id="ps2"/>
<br/>
年龄:<input type="text" name="age" id="age"/>
<br/>
性别:<input type="radio" name="sex" value="0" />男
<input type="radio" name="sex" value="1"/> 女
<br/>
爱好:<input type="checkbox" name="box" value="0"/>篮球
<input type="checkbox" name="box" value="1"/>足球
<input type="checkbox" name="box" value="2"/>排球
<input type="checkbox" name="box" value="3"/>网球
<input type="checkbox" name="box" value="4"/>羽毛球
<br/>
E-mail:<input type="text" id="email"/>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
js函数、表单验证的更多相关文章
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- 原生js制作表单验证，基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
- 原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...
- js——form表单验证
用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- JS实战 · 表单验证
思路: 1.定义页面 通过表格格式化表单: 表格行都有自己的背景颜色: 单元格中的数据(文本等)用div进行封装 ...
随机推荐
- 应付描述性弹性域 Description Flexfield
(N) AP > Setup > Flexfield > Description > Segments To define your descriptive flexfield ...
- Struts 2.3.1.1 命令执行漏洞
漏洞版本: Struts 2.3.1.1 漏洞描述: CVE ID:CVE-2011-3923 Struts2的核心使用的是WebWork框架,而WebWork通过XWork来处理用户的请求参数.Xw ...
- SharePoint 2010 WSP包部署过程中究竟发生什么？
转:http://www.xue163.com/158/6/1585365.html 在SharePoint 2010中,我们可以使用Visual Studio 2010轻松创建WSP包来安装Web ...
- 嵌入式linux中使用 DHCP功能描述
嵌入式linux中使用 DHCP功能描述 busybox中udhcpc的默认script脚本地址为#define DEFAULT_SCRIPT CONFIG_UDHCPC_DEFAULT_SCRI ...
- CodeForces - 445A - DZY Loves Chessboard解题报告
对于这题本人刚开始的时候觉得应该用DFS来解决实现这个问题,但由于本人对于DFS并不是太熟,所以就放弃了这个想法: 但又想了想要按照这个要求实现问题则必须是黑白相间,然后把是字符是'B'或'W'改为' ...
- c++ 派生类向基类转换的可访问性
对于c++面向对象一直很疑惑,这次决定下功夫把它弄明白 一.派生类和基类之间的类型转换 首先理解,派生类含有基类的所有成分,只不过有些就算在派生类的成员函数也不能访问而已. (1)派生类和基类的自动转 ...
- vijosP1115 火星人
vijosP1115 火星人 链接:https://vijos.org/p/1115 [思路] 排列组合. 题目要求为求第下m个排列. 这里有两种方法,首选的是调用algorithm中的next_pe ...
- JavaScript基本概念(一) v0.5
摘要:先简单介绍ECMAScript的语法(如果有其他类C的经验,这个很好理解),接着介绍了ECMAScript的数据类型:Number.Boolean.String.Undefined和Null类型 ...
- apple公司的潮起潮落——浪潮之巅
今天代码写不下去的时候,躺在床上看了一下浪潮之巅.翻了一下书目,选了apple公司那一篇. 其实apple公司的事情我已经听过不止一次了,但是每次都是间间断断地听说,都没有系统地了解它到底是经历了怎么 ...
- 搭建集群必备：windows如何使用Xshell远程连接（SSH）Linux
出处about云(http://www.aboutyun.com/blog-61-22.html)欢迎访问我的博客 首先介绍一下环境: (主机)操作系统:win7 虚拟机:vmware worksta ...