JavaScript（六）
表单验证技术：
获取表单元素的值并进行判断
在表单的提交时间中调用表单验证函数
如果对则提交
如果不对则阻止提交
表单元素的值都是string类型
string的常用属性和方法：
属性：length 获取字符个数
方法：indexOf 查找字符串的位置
charAt 获取指定索引的字符
substring 截取字符串
substr 截取字符串（第一个参数：开始截取的索引；第二个参数：需要截取的字符长度）
toLowerCase 转换字符串为小写
toUpperCase 转化字符串为大写
表单提交数据的方式有两：
方法 一：按钮用submit，并在form中添加
//表单验证失败，但是表单还是会提交 //在事件中应使用return阻止表单的提交 <form action=“#” method=“post” onsubmit=“return 函数”> </form>
方法二：添加普通的按钮，为其添加表单的提交方法
在按钮图层添加onclick事件，
在方法中满足条件的情况下提交form.submit;
判断填写是否为空：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 表单校验需要为form添加onsubmit事件，校验函数中将非法的情况return false，
最后在调用校验函数时使用return将函数的返回值返回给事件 -->
<form action="success.html" method="post" onsubmit="return validate()">
<input id="userName" type="text" name=""><br>
<input id="password" type="password" name=""><br>
<input type="submit" value="login" name="">
</form>
<hr>
<form action="success.html" method="post" id="form2">
<input id="userName2" type="text" name=""><br>
<input id="password2" type="password" name=""><br>
<input type="button" value="login" name="" onclick="validate2()">
</form>
</body>
</html>
<script type="text/javascript">
var userName = document.getElementById("userName");
var password = document.getElementById("password");
function validate(){
//判断用户名和密码是否填写（判断没填写就是空双引号）
if(userName.value == ""){
alert("请填写用户名！");
return false;
}
if(password.value == ""){
alert("请填写密码！");
return false;
}
// alert("表单正在提交");
// return false;
}
var userName2 = document.getElementById("userName2");
var password2 = document.getElementById("password2");
//获得表单对象
var form2 = document.getElementById("form2");
function validate2(){
if(userName2.value == ""){
alert("请填写用户名！");
}
else if(password2.value == ""){
alert("请填写密码！");
}
else{
//提交表单
form2.submit();
}
}
// js字符串的方法和java几乎完全相同
var str = "hellogeekhome";
//截取字符串
//str = str.substring(5);
//str = str.substring(5,9);
//截取字符串，第一个参数表示截取的起始索引，第二个参数表示截取的字符长度
str = str.substr(5,4);
console.log(str);
</script>
正则表达式：
在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码
正则表达式通过规则符号进行内容的匹配
常用的正则表达式匹配符
编写正则表达式：
//编写正则表达式的规则 var rule=/^\w+@\w+.\w+$/; //使用规则进行验证 if(rule.test(values)) { alert(“验证成功”); }
元字符基本正则规则的示例 + 限定符的使用示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="txt" type="" name="">
<input type="button" value="validate" name="" onclick="validate()">
</body>
</html>
<script type="text/javascript">
var txt = document.getElementById("txt");
function validate(){
var rule;
/*******************元字符和正则的基本规则使用**********************/
//定义正则表达式的规则
//匹配包含了hello的字符串
rule = /hello/;
//精确匹配hello字符串
rule = /^hello$/;
//中括号用于匹配单个字符
//当前匹配的是a或b或c字母
rule = /^[abc]$/;
rule=/^[a,b,c]$/;
rule = /^a|b|c$/;
//匹配hello或者是wellcome（单独需要匹配的内容需要加括号，所有的需要匹配的内容也需要加总的括号）
rule = /^((hello)|(wellcome))$/;
//匹配字符串以ab或者是ad进行前缀，后面由hello构成，能够匹配的结果：abhello、adhello
rule = /^((ad)|(ab))hello$/;
rule = /^a(b|d)hello$/;
//匹配ahello或者是bhello
rule = /^(a|b)hello$/;
//匹配单个字符为26个小写字母
rule = /^[a-z]$/;
//匹配0-9的数字
rule = /^[0-9]$/;
rule = /^\d$/;
//匹配一位负数
rule = /^-\d$/;
//匹配2位数
rule = /^[1-9][0-9]$/;
//匹配一位不区分大小写的字母
rule = /^[a-zA-Z]$/;
rule= /^a-z,A-Z$/;
rule = /^[a-z]$/i;
//匹配a或者b开头第2位是任意字符，第3位是数字
rule = /^[ab].[0-9]$/; (aa3 a-3都对)
//匹配 .java的源文件名称，要求类名是2位字母
\表示转义符，可以将正则中的特殊字符转义成普通的字符值
rule = /^[a-zA-Z][a-zA-Z]\.java$/;
//匹配(java或者mysql)
rule = /^\(((java)|(mysql))\)$/;
//匹配1位数字或者字母或者下划线
rule = /^[0-9z-Z_]$/;
rule = /^\w$/;
//匹配hello空格geekhome \s匹配一个空格
rule = /^hello\sgeekhome$/;
//匹配单词hello 单词需要空格和其他字符间隔
rule = /\bhello\b/;
/*******************限定符的使用**********************/
//匹配字符串，要求第一位是数字字母下划线，后面部分可以是任意长度的数字
//*表示前一位字符或元字符重复任意多次
rule = /^\w\d*$/;
//匹配字符串以hello开头后面可以出现任意多的java
rule = /^hello(java)*$/;
//+表示至少重复1次以上
rule = /^\d+$/;
//?表示重复0次或者1次
rule = /^\d?$/;
//数字出现5次
rule = /^\d{5}$/;
//数字出现2-4次
rule = /^\d{2,4}$/;
//数字出现2位以上
rule = /^\d{2,}$/;
//匹配邮箱
rule = /^\w+@[0-9a-z]+(\.[a-z]+)+$/;
//使用正则表达式对值进行校验
if(rule.test(txt.value)){
alert("success");
}
else{
alert("failure");
}
}
</script>
浙公网安备 33010602011771号