AngularJS form表单验证(非常全面)

构建一个ng表单

novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

<form name="form" novalidate="novalidate">
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

ng默认提供了验证

验证是否已输入文字,只需在标签上加上required:

<input type="text" ng-model="user.name" required />

验证至少输入{number}个字符,使用指令ng-minlength=“{number}”:

<input type="text" ng-model="user.name" ng-minlength="5" />

验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”:

<input type="text" ng-model="user.name" ng-maxlength="20" />

确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/":

<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />

验证输入是一个Email,设置input的type属性为email:

<input type="email" name="email" ng-model="user.email" />

验证输入是一个数字,设置input的type属性为number:

<input type="number" name="number" ng-model="user.age" />

验证输入是一个URL,设置input的type属性为url

<input type="url" name="homepage" ng-model="user.weburl" />
时间: 2024-12-06 00:01:26

AngularJS form表单验证(非常全面)的相关文章

基于angularJS的表单验证练习

今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa"> <form novalidate name="loginForm"> <div> <label>用户名</label> <input type="text" name="nText"

python_way day14 HTML-day5 (form表单验证,)

python-way day19 1. dJango的form表单验证 一,django表单验证功能 1.django验证基础: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>django form</title> </head> <body> <div> <i

用jquery写自己的form表单验证

这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路:   1.<input type="text" Validate="Date" id="date"/>这里的 Validate:是我们需要验证的类型(属于日期类型),这里你也可以自己定义.id属性就不用说了.<input type=

django之form表单验证

django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf-8 -*- import re from django import forms from django.core.exceptions import ValidationError def mobile_validate(value): mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]

Python自动化运维系列之Django Form表单验证

Form表单验证 Django核心功能组件之一,虽然也可以在前端使用JS对表单验证, 但是Django中已经为我们准备好的Form功能还算是很强大的,有时候比较适合运维,为我们简化了很多前端开发工作. Django最主要的几个功能有4个     ·  生成HTML标签     ·  验证数据(表单错误信息提示)     ·  HTML 表单保留上次提交数据     ·  初始化页面表单内容 Django的Form内容还是挺多的,我们可以从一个简单的登陆验证例子来看看Form的基本功能使用 1)新

Django基础之Form表单验证

Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from django.forms import widgets from Mybbs.models import * import re class UserForm(Form): username = fields.CharField( required=True, error_messages={'re

Django中的Form表单验证

回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错误信息的字典,并会遍历类的所有属性(对应前端待验证的输入域),调用各自的验证方法,将错误信息(两类,必要与否以及格式正确与否)存入字典,并得出最终的验证结果.在使用时,需要定义继承自Form基类不同的Form类,以对应有着不同输入域的Form表单.在拿到前端给的字典前,要先初始化自定义From类,直

抽屉之Tornado实战(7)--form表单验证

在这里,我们把form表单验证的代码进行工具化了,以后稍微修改一下参数就可以拿来用了 先贴上代码 forms.py from backend.form import fields class BaseForm: def __init__(self): self._value_dict = {} self._error_dict = {} self._valid_status = True def valid(self, handler): for field_name, field_obj in

ant-pro使用Form表单验证上传图片出现的问题

1.复现:用antd的Form表单验证上传图片必填项时出现问题:复现过程,先提交,提示图片需要上传,上传成功后,依旧提示:图片未上传 2.表单验证原理:先理解一下antd的Form表单验证的表层原理,每个表单getFieldDecorator配置项都有个名字,比如就叫goodsSkuImg,这个goodsSkuImg对应this.props.form.goodsSkuImg如果为空则验证不通过. 3.结论:Form提示的根本原因是this.props.form.goodsSkuImg值为空 4.