博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript表单验证
阅读量:4546 次
发布时间:2019-06-08

本文共 2371 字,大约阅读时间需要 7 分钟。

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>

注:大多数代码基本都一样写法也类似,代码不是自己写的摘抄自:

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

你可能感兴趣的文章
mysql 创建merge表方便查询
查看>>
测试你的浏览器是否支持WebGL(Does My Browser Support WebGL)
查看>>
PAT Basic 1036
查看>>
券商VIP交易通道
查看>>
TCP/IP、UDP、HTTP、SPDY等的一些解释说明
查看>>
第38章:MongoDB-集群--Replica Sets(副本集)---多机的搭建
查看>>
Python之模块和包
查看>>
省选专练【POI2015】Pieczęć
查看>>
win7下的PHP+IIS配置,找不到php5isapi.dll的问题,版本5.4.9
查看>>
thinkphp+redis实现秒杀功能
查看>>
Java 基础面试题
查看>>
LAMP安装(一)关于Apache的源码安装
查看>>
全排列
查看>>
我也不知道叫什么
查看>>
怎样用命令查看网卡接口的方法
查看>>
css经典布局—Sticky footers布局
查看>>
mysql表设计---时间类型
查看>>
wamp服务器
查看>>
Codeforces 1144G Two Merged Sequences dp
查看>>
STL内存分配方式
查看>>