JS --正则表达式验证实战之邮箱模式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS --正则表达式验证实战之邮箱模式相关的知识,希望对你有一定的参考价值。

 JS验证格式:提高用户体验,验证文本。

需要防止程序员的代码结构更改攻击,因为web段的代码有可能会被更改,更改后JS有可能会验证不住
那么,C#端在JS段通过验证的情况下,还需要进行二次验证

技术分享
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" />


    </form>
</body>
View Code
    <script type="text/javascript">
        window.onload = function () {//文档加载完成之后就会触发该事件
            document.getElementById("Button1").onclick = function () {
                //1、将文本框的值取出来看看
                var txt1 = document.getElementById("TextBox1").value;

                //如果空,那么提示不能为空,并且阻止提交
                if (/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/.test(txt1) == false || txt1.length !=11) {//可以网上搜集
                    document.getElementById("Label1").innerhtml = "手机号码格式有误!";
                    return false;//阻止提交的
                }
                //如果不为空,那么就直接提交
            };
        };
    </script>

邮箱:

技术分享
<body>
    <form id="form1" runat="server">
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <table id="tb1">
                    <tr id="tr_head">
                        <td>
                            <input type="checkbox" id="ck_all" /><label for="ck_all">全选</label></td>
                        <td>用户名</td>
                        <td>密码</td>
                        <td>昵称</td>
                        <td>性别</td>
                        <td>生日</td>
                        <td>民族</td>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr class="tr_item">
                    <td>
                        <input type="checkbox" class="ck" name="ckk" value="<%#Eval("UserName") %>" />
                    </td>
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("PassWord") %></td>
                    <td><%#Eval("NickName") %></td>
                    <td><%#Eval("SexStr") %></td>
                    <td><%#Eval("BirthdayStr") %></td>
                    <td><%#Eval("NationName") %></td>
                </tr>
            </ItemTemplate>

            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>

        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </form>
</body>
View Code

 

 <title></title>
    <style type="text/css">
        #tb1 {
        width:100%;
        background-color:#ff6a00;
        text-align:center;
        
        }
        #tr_head {
        color:white;
        }
        .tr_item {
       background-color:#ffd800;
             }


    </style>
    <script type="text/javascript">
        window.onload = function () { 
        /*点击全选 把所有的ck全部选出,for循环遍历*/
        document.getElementById("ck_all").onclick = function () {
            var oCks = document.getElementsByClassName("ck");
            for (var i = 0; i < oCks.length; i++)
            {
                oCks[i].checked = this.checked;
            }
        };
        

        /*点击所有的之后,全选也自动选择。先取每一个的点击事件*/
        var ckk = document.getElementsByClassName("ck");
        for (var i = 0; i < ckk.length; i++)
        {
            ckk[i].onclick = function () {
                var ok = 0;/*默认是0,每点击一下循环全部的ckk*/
                for (var j = 0; j < ckk.length; j++)
                {
                    if (ckk[j].checked == true)/*每点击一下把选中的取出*/
                    {
                        ok++;
                    }
                }
                if (ok == ckk.length) {/*所有ckk的个数和选中的匹配,ck_all选中*/
                    document.getElementById("ck_all").checked = true;
                }
                else {
                    document.getElementById("ck_all").checked = false;
                }
            };
        }
        };
    </script>



</head>
<body>
    <form id="form1" runat="server">
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
           <table id="tb1">
               <tr id="tr_head">
                   <td><input type="checkbox"id="ck_all" /><label for="ck_all">全选</label></td>
                 <td>用户名</td>  
                   <td>密码</td>  
                   <td>昵称</td>  
                   <td>性别</td>  
                   <td>生日</td>  
                   <td>民族</td>  
               </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr class="tr_item">
                    <td>
                     <input type="checkbox" class="ck" name="ckk" value="<%#Eval("UserName") %>" />   
                    </td>
                   <td><%#Eval("UserName") %></td>
                   <td><%#Eval("PassWord") %></td>
                   <td><%#Eval("NickName") %></td>
                   <td><%#Eval("Ssex") %></td>
                   <td><%#Eval("Birthday2") %></td>
                   <td><%#Eval("Nation") %></td>
                    </tr>
            </ItemTemplate>
            <FooterTemplate>
            </table>
            </FooterTemplate>
        </asp:Repeater>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </form>
</body>

 

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = new UsersDA().Select();
            Repeater1.DataBind();
        }
        Button1.Click += Button1_Click;
    }

    void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = Request["ckk"].ToString();//点击按钮取出主键值。
        string[] unames = Request["ckk"].ToString().Split(,);//分隔
        foreach (string s in unames)//遍历所选的
        {
            new UsersDA().Delete(s);
        }
        Repeater1.DataSource = new UsersDA().Select();
        Repeater1.DataBind();//删完再重新绑定
    }

 

以上是关于JS --正则表达式验证实战之邮箱模式的主要内容,如果未能解决你的问题,请参考以下文章

在js中获取作成者

web--JS 基础实例汇总

前端学习:JS学习总结(图解)

怎么在自己的js空间里引入其他js?

Node.js 和 Vue.js,为啥 Refresh 让 vue.js 的 store 清晰?我如何在 vue.js 中使用上传的图片?

javascript引入外部js文件