一行代码搞定整站的前端表单验证！

能简介：

可以在input上直接绑定正则，可以自定义datatype，自定义datatype可以是正则，也可以是函数，datatype可以累加或单选，甚至还可以对datatype规则执行简单的逻辑运算。内置10类常见的格式验证；
可以自定义提示方式，可以实现你想要的任何提示效果。内置了4种常见的提示方式；
可以对表单下的某一块区域或具体的某个表单元素单独进行验证，并可以选择验证后需不需要显示出错信息，还能得到一个值来判断被检测对象是否通过了验证；
可以轻松的取消或恢复对表单下的某一块区域或具体的某个表单元素的验证；
强大的ajax功能，很轻松的可以实现实时验证以及表单的ajax提交；可以灵活的设置ajax提交时的参数；
智能的出错信息提示：会根据绑定的datatype输出相应的出错信息，另外还可以在自定义datatype里返回具体的出错信息，错误信息里可以使用html标签，如果页面里没有显示出错信息的标签，会根据tiptype值自动创建。可以选择在没有输入时不提示和只在提交表单时有信息提示。可以选择一次提示单个错误或一次显示全部出错信息。可以自己设置默认的提示文字；
可以在表单开始检测前和表单检测通过后，提交表单之前绑定事件；
当前版本外调插件可以实现文件上传检测、密码强度检测、日期控件和表单美化效果；
丰富的Validform对象的属性和方法，给你的验证操作带来无限的可能。

Validform使用入门

1、引入css

请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中（文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的）。之前发现有部分网友把整个style.css都引用在了页面里，然后发现样式冲突了。

2、引入js （jquery 1.4.3 以上版本都可以）

3、给需要验证的表单元素绑定附加属性

</form>

4、初始化，就这么简单

$(function(){

$(".demoform").Validform();

})

</script>

官方下载地址：http://validform.rjboy.cn/download.html

篇文篇主要简述如何在springboot中验证表单信息。在springmvc工程中，需要检查表单信息，表单信息验证主要通过注解的形式。

构建工程

创建一个springboot工程，由于用到了 web 、thymeleaf、validator、el，引入相应的起步依赖和依赖，代码清单如下：

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.hibernate</groupId>

<artifactId>hibernate-validator</artifactId>

</dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-el</artifactId>

</dependency>

</dependencies>

创建一个PresonForm的Object类

package com.forezp.entity;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
/**
 * Created by fangzhipeng on 2017/4/19.
 */
public class PersonForm {
 @NotNull
 @Size(min=2, max=30)
 private String name;
 @NotNull
 @Min(18)
 private Integer age;
 public String getName() {
 return this.name;
 }
 public void setName(String name) {
 this.name=name;
 }
 public Integer getAge() {
 return age;
 }
 public void setAge(Integer age) {
 this.age=age;
 }
 public String toString() {
 return "Person(Name: " + this.name + ", Age: " + this.age + ")";
 }
}

这个实体类，在2个属性:name,age.它们各自有验证的注解：

@Size(min=2, max=30) name的长度为2-30个字符
@NotNull 不为空
@Min(18)age不能小于18

创建 web Controller

@Controller
public class WebController extends WebMvcConfigurerAdapter {
 @Override
 public void addViewControllers(ViewControllerRegistry registry) {
 registry.addViewController("/results").setViewName("results");
 }
 @GetMapping("/")
 public String showForm(PersonForm personForm) {
 return "form";
 }
 @PostMapping("/")
 public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {
 if (bindingResult.hasErrors()) {
 return "form";
 }
 return "redirect:/results";
 }
}

创建form表单

src/main/resources/templates/form.html:

<html>

<body>

<table>

<tr>

<td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>

</tr>

<tr>

<td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>

</tr>

<tr>

<td><button type="submit">Submit</button></td>

</tr>

</table>

</form>

</body>

</html>

注册成功的页面

src/main/resources/templates/results.html:

<html>

<body>

Congratulations! You are old enough to sign up for this site.

</body>

</html>

演示

启动工程，访问http://localhost:8080/：

如果你输入A和15，点击 submit:

如果name 输入N, age为空：

如果输入：forezp. 18

参考资料

https://spring.io/guides/gs/validating-form-input/

## 利用forms表单组件进行表单校验，完成用户名，密码，确认密码，邮箱功能的校验

该作业包含了下面的知识点：

error_messages，label，required，invalid，局部钩子函数，全局钩子函数，

forms_obj.cleaned_data，forms_obj.errors，locals()，

{{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}

### urls.py文件

```

在线咨询

上一篇：「融职培训」Web前端学习第7章 Vue基础教程3
下一篇：BigSeller-多客分享-Shopee上产品合理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一行代码搞定整站的前端表单验证！

能简介：

Validform使用入门

您的项目需求