表单校验

Posted 2020-07-13 回青

                           表单校验和正则表达式

表单作为客户端向服务器端提交数据的主要载体

注意：在web编程中，必须对web应用的前后端同时校验

1.防止提交过程中黑客对表单的更改

2.防止某些浏览器对jvascript不支持，而无法完成前端表单校验

使用js进行表单验证

 <script type="text/javascript">
     function checkName(){
         //名字和姓氏均不能为空，并且不能有数字
         var name = $("#fname").val();
         if (name == "") {
             alert("姓名不能为空！");
             return false;
         }
         for (var i = 0; i < name.length; i++) {
             var j = name.substring(i, i + 1);
             if (isNaN(j) == false) {
                 alert("姓名中不能有数字！");
                 return false;
             }
         }
     }

     function checklnaem() {
         var lname = $("#lname").val();
         if (lname == "") {
             alert("姓氏不能为空！");
             return false;
         }
         for (var i = 0; i < lname.length; i++) {
             var j = lname.substring(i, i + 1);
             if (isNaN(j) == false) {
                 alert("姓氏中不能有数字！");
                 return false;
             }
         }
     }
     function checkpwd() {
         //密码不能少于6位
         var pwd = $("#pass").val();
         if (pwd.length < 6) {
             alert("密码不能少于6位！");
             return false;
         } 
     }
     function checkrepwd() {
         var pwd = $("#pass").val();
         if (pwd!= $("#rpass").val()) {
             alert("两次输入的密码必须相同！");
             return false;
         }
     }
     function checkEmail() {
         //验证电子邮箱不能为空
         var email = $("#email").val();
         if (email == "") {
             alert("电子邮箱并不能为空！");
             return false;
         }
         //电子邮箱中必须含有符号"@"和"."
         if (email.indexOf("@") == -1) {
             alert("电子邮箱不合法\n必须包含@");
             return false;
         }
         if (email.indexOf(".") == -1) {
             alert("电子邮箱不合法\n必须包含.");
             return false;
         }
     }
     
     $(function () {
         $("#email").blur(checkEmail);
         $("#pass").blur(checkpwd);
         $("#rpass").blur(checkrepwd);
         $("#fname").blur(checkName);
         $("#lname").blur(checklnaem);
     });
</script>

二、正则表达式

正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的

RegExp对象是Regular Expression（正则表达式）的缩写，它是对字符串执行模式匹配的强大工具

1.定义正则表达式

（1）普通方式

（2）构造函数的方式

 

  ----------普通方式

 语法：  

var  reg=/表达式/附加参数

附加参数：用来扩展表达式的含义，主要有一下3个参数

g：代表可以进行全局匹配

i：代表不区分大小写匹配

m:代表可以进行多行匹配

上面的三个参数可以任意组合，代表复合含义，当然也可以不加参数。

--------------------------构造函数的方式

语法：

var reg=new RegExp（“表达式”，“附加参数”）；

表达式的模式

简单模式和复合模式