JavaScript表单验证

1、表单验证的必要性：

由于操作表单的人有所不同，输入的数据就难免有不规范的时候，所以有必要规范输入格式。

数据输入的不规范导致后期管理上数据重复或不规范等等一系列的问题，因此对输入数据

进行验证就可以很好的避免一些不必要的麻烦了。

2、js代码：

<script type="text/javascript">

$(document).ready(function(){

 $("#email").blur(function(){

   $("#user_name").val(($(this).val().split("@"))[0]);

  });

});

//注册表单验证

$(function(){

    $('#register_form').validate({

        errorPlacement: function(error, element){

            var error_td = element.parent('td').next('td');

            error_td.find('.field_notice').hide();

            error_td.append(error);

        },

        success       : function(label){

            label.addClass('validate_right').text('OK!');

        },

        onkeyup: false,

        rules : {

         user_name : {

             required : true,

             byteRange: [3,25,'gbk'],

             remote   : {

                 url :'index.php?app=member&act=check_user&ajax=1',

                 type:'get',

                 data:{

                     user_name : function(){

                         return $('#user_name').val();

                     }

                 },

                 beforeSend:function(){

                     var _checking = $('#checking_user');

                     _checking.prev('.field_notice').hide();

                     _checking.next('label').hide();

                     $(_checking).show();

                 },

                 complete :function(){

                     $('#checking_user').hide();

                 }

             }

         },

            password : {

                required : true,

                minlength: 6

            },

            password_confirm : {

                required : true,

                equalTo  : '#password'

            },

            email : {

             required : true,

             email    : true,

                remote   : {

                    url :'index.php?app=member&act=check_email&ajax=1',

                    type:'get',

                    data:{

                        email : function(){

                            return $('#email').val();

                        }

                    },

                    beforeSend : function(){

                        var _checking = $('#checking_email');

                        _checking.prev('.field_notice').hide();

                        _checking.next('label').hide();

                        $(_checking).show();

                    },

                    complete : function(){

                        $('#checking_email').hide();

                    }

                }

         },

         mobile  :{

          minlength: 11,

          maxlength: 12

         },

            captcha : {

                required : true,

                remote   : {

                    url : 'index.php?app=captcha&act=check_captcha',

                    type: 'get',

                    data:{

                        captcha : function(){

                            return $('#captcha1').val();

                        }

                    }

                }

            },

            agree : {

                required : true

            }

        },

        messages : {

         user_name : {

             required : '您必须提供一个用户名',

             byteRange: '用户名必须在3-25个字符之间',

             remote   : '您提供的用户名已存在'

         },

            password  : {

                required : '您必须提供一个密码',

                minlength: '密码长度应在6-20个字符之间'

            },

            password_confirm : {

                required : '您必须再次确认您的密码',

                equalTo  : '两次输入的密码不一致'

            },

            email : {

             required : '您必须提供您的电子邮件',

             email    : '这不是一个有效的电子邮件地址',

             remote   : '您提供的email已经存在'

         },

         mobile       : {

          minlength: '请输入正确的11位数的手机号码',

          maxlength: '请输入正确的11位数的手机号码'

         },

            captcha : {

                required : '请输入右侧图片中的文字',

                remote   : '验证码错误'

            },

            agree : {

                required : '您必须阅读并同意该协议,否则无法注册'

            }

        }

    });

});

</script>
注：大多数代码基本都一样写法也类似，代码不是自己写的摘抄自：http://zhanglulu33.blog.163.com/blog/static/1127995420104119017225/

转载于:https://www.cnblogs.com/boonya/archive/2012/04/15/2451068.html