• 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>
  • 相关阅读:
    python线程与进程手记
    3.08课·········switch case及if else嵌套(日期格式)
    3.07课·········if分支语句
    3.06课·········C#语言基础
    3.05课·········进制转换
    Oracle profile 使用技巧
    sys用户密码丢失找回密码的步骤和命令
    oracle帐号scott被锁定如何解锁
    SQL中哪些情况会引起全表扫描
    Oracle创建用户、角色、授权、建表
  • 原文地址:https://www.cnblogs.com/gfl-1112/p/12872924.html
Copyright © 2020-2023  润新知