首页 > 编程语言> 文章详细

JavaScript（六）

2020-10-06 21:31:34 阅读：206 来源： 互联网

标签：匹配 JavaScript rule 表单 var 字符串 hello

表单验证技术：

　　获取表单元素的值并进行判断

　　在表单的提交时间中调用表单验证函数

　　　　如果对则提交

　　　　如果不对则阻止提交

表单元素的值都是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>

标签：匹配,JavaScript,rule,表单,var,字符串,hello
来源： https://www.cnblogs.com/gfl-1112/p/12872924.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript（六）