表单验证技术:
获取表单元素的值并进行判断
在表单的提交时间中调用表单验证函数
如果对则提交
如果不对则阻止提交
表单元素的值都是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 = /^hellosgeekhome$/; //匹配单词hello 单词需要空格和其他字符间隔 rule = /hello/; /*******************限定符的使用**********************/ //匹配字符串,要求第一位是数字字母下划线,后面部分可以是任意长度的数字 //*表示前一位字符或元字符重复任意多次 rule = /^wd*$/; //匹配字符串以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>