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 = /^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>
原文地址:https://www.cnblogs.com/gfl-1112/p/12872924.html