bob体育官方平台
【bob体育app】Java Script根基(十生机勃勃) 表单验证

本文实例需要验证的内容:中文姓名、手机号、身份证和地址,验证方法分享给大家供大家参考,具体内容如下

校验介绍

一个应用的输入应该首先要验证。这个输入可以是用户的输入,也可以是另一个应用的输入。在一个Web应用中,验证通常要实现2次:第一次是客户端验证,第二次是服务端验证。客户端的验证是为了更好的用户体验,通过检测表单的字段来提醒用户必须的字段;服务端的验证是更严格且无法避免的。
服务端的验证是在应用服务层实现的。应用服务方法应该首先检查(验证)输入然后在使用。ABP提供了一个不错的基础设施来验证应用服务方法的输入。

一、表单验证的必要性:

HTML:

基础验证

查看模板创建的dto中可以看见如下的内容,其中Required和StringLength都继承于ValidationAttribute类,如果我们需要自定义这样公用的验证方式,也可以自己继承这个类,并引用。

    public class RoleDto : EntityDto<int>
    {
        [Required]
        [StringLength(AbpRoleBase.MaxNameLength)]
        public string Name { get; set; }

        [Required]
        [StringLength(AbpRoleBase.MaxDisplayNameLength)]
        public string DisplayName { get; set; }

        public string NormalizedName { get; set; }

        [StringLength(Role.MaxDescriptionLength)]
        public string Description { get; set; }

        public bool IsStatic { get; set; }

        public List<string> Permissions { get; set; }
    }

我们自己定义的dto也可以直接使用如下:

    public class UpdateNoteDto : EntityDto<int>
    {
        /// <summary>
        /// 标题
        /// </summary>
        public string Title { get; set; }
        /// <summary>
        /// 内容
        /// </summary>
        [Required]
        public string Content { get; set; }
        /// <summary>
        /// 上次修改时间
        /// </summary>
        public DateTime? LastModificationTime { get; set; }
    }

测试一下,在Swagger UI 中:

bob体育app 1

api发送的内容

bob体育app 2

收到的回复

  表单验证在客户端和服务器端,客户端验证实际是直接调用JavaScript脚本对用户输入的数据进行验证;而服务器也同样可以实现数据验证,但是当服务器压力过大时,资源损耗会比较严重,用户体验也不够好。所以通常验证我们大多数都会在客户端实现,这样可以降低服务器的压力,让服务器做其他更重要的事情。

jQuery验证:

自定义验证

对于特殊的逻辑,我们只在这个功能中验证数据,别的地方用不到,我们也可以实现ICustomValidate接口类自定义验证:

    public class PublicNoteDto: UpdateNoteDto,ICustomValidate
    {
        /// <summary>
        /// 简单描述,用于微信推送时的描述或者其他
        /// </summary>
        public string Des { get; set; }
        /// <summary>
        /// 封面图片,可用于微信推送时或者其他
        /// </summary>
        [Required]
        public string Img { get; set; }
        /// <summary>
        /// 关键字,可用于搜索,分类等
        /// </summary>
        public string Tags { get; set; }
        /// <summary>
        /// 是否发布
        /// </summary>
        public bool IsPublic { get; set; }

        public void AddValidationErrors(CustomValidationContext context)
        {
            if (string.IsNullOrEmpty(Des))
            {
                string error = "描述不能为空!";
                context.Results.Add(new ValidationResult(error));
            }
            if (Des.Length < 10)
            {
                string error = "描述不能少于10个字!";
                context.Results.Add(new ValidationResult(error));
            }
            if (Des.Length > 200)
            {
                string error = "描述不能大于200个字!";
                context.Results.Add(new ValidationResult(error));
            }
        }
    }

bob体育app 3

api发送的内容

bob体育app 4

收到的回复

 

test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值

标准化

标准化就是在验证之后,进行一些额外的操作。
具有Normalize方法的IShouldNormalize接口。如果实现了这个接口,Normalize方法就会在验证之后调用。

    public class CreateNoteDto : IShouldNormalize
    {
        /// <summary>
        /// 创建时间
        /// </summary>
        public DateTime? CreationTime { get; set; }
        /// <summary>
        /// 创建人
        /// </summary>
        public long CreatorUserId { get; set; }
        /// <summary>
        /// 内容的数据类型 markdown内容,html内容,或者其他
        /// </summary>
        public int TextType { get; set; }

        public void Normalize()
        {
            CreationTime = DateTime.Now;
        }
    }

bob体育app 5

api发送的内容

bob体育app 6

我们service收到的数据

二、表单验证的内容:

// 验证中文名称function isChinaName { var pattern = /^[u4E00-u9FA5]{1,6}$/; return pattern.test;}// 验证手机号function isPhoneNo { var pattern = /^1[34578]d{9}$/; return pattern.test; }// 验证身份证 function isCardNo { var pattern = /|/; return pattern.test; } // 验证函数function formValidate() { var str = ''; // 判断名称 if.val { str += '名称没有输入n'; $; } else { if(isChinaName.val { str += '名称不合法n'; $; } } // 判断手机号码 if .val { str += '手机号没有输入n'; $; } else { if(isPhoneNo.val { str += '手机号码不正确n'; $; } } // 验证身份证 if.val { str += '身份证号码没有输入n'; $; } else { if(isCardNo.val { str += '身份证号不正确;n'; $; } } // 验证地址 if.val { str += '地址没有输入n'; $; } // 如果没有错误则提交 if { alert; return false; } else { $.submit.on { formValidate;

  1、验证表单内容是否为空。

希望本文所述对大家学习jquery程序设计有所帮助。

  2、验证是否为数字。

  3、验证电子邮件格式。

  4、验证数据是否在某个范围以内。

  5、验证用户输入的内容长度是否足够。

返回顶部