html5 html5Validate实现表单验证

最新推荐文章于 2024-08-25 07:25:43 发布
最新推荐文章于 2024-08-25 07:25:43 发布
阅读量4.6k 收藏
点赞数
分类专栏： html5 文章标签： html5 html5Validate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chadcao/article/details/39233091
版权

html代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta id="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery-html5Validate-min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#TestForm').html5Validate(function () {
                var model = { UserName: $('#UserName').val(), Password: $('#Password').val(), ConfirmPassword: $('#ConfirmPassword').val() };
                $.post('@Url.Action("DoSubmit", "Home")', model, function (result) {
                    if (result != undefined && result != null) {
                        alert(result.UserName);
                    }
                });
            }, {
                validate: function () {
                    var Password = $('#Password').val();
                    var ConfirmPassword = $('#ConfirmPassword').val();
                    if (Password != ConfirmPassword) {
                        $('#ConfirmPassword').testRemind('前后密码不一致');
                        return false;
                    }
                    return true;
                }
            });
        });
    </script>
</head>
<body>
    <form action="" method="post" id="TestForm">
        <table>
            <tr>
                <td>text</td>
                <td><input type="text" id="UserName" required /></td>
            </tr>
            <tr>
                <td>password</td>
                <td><input type="password" id="Password" required /></td>
            </tr>
            <tr>
                <td>password</td>
                <td><input type="password" id="ConfirmPassword" required /></td>
            </tr>
            <tr>
                <td>radio</td>
                <td>
                    <input type="radio" id="Male" name="sexy" required />
                    <input type="radio" id="Female" name="sexy" required />
                </td>
            </tr>
            <tr>
                <td>email</td>
                <td><input type="email" id="Email" /></td>
            </tr>
            <tr>
                <td>multiple email</td>
                <td><input type="email" id="MultiEmail" multiple /></td>
            </tr>
            <tr>
                <td>url</td>
                <td><input type="url" id="Url" /></td>
            </tr>
            <tr>
                <td>number</td>
                <td><input type="number" id="Number" min="0" max="10" step="2" value="4" /></td>
            </tr>
            <tr>
                <td>range</td>
                <td><input type="range" id="Range" min="0" max="10" step="2" value="4" /></td>
            </tr>
            <tr>
                <td>date</td>
                <td><input type="date" id="Date" /></td>
            </tr>
            <tr>
                <td>time</td>
                <td><input type="time" id="Time" /></td>
            </tr>
            <tr>
                <td>month</td>
                <td><input type="month" id="Month" /></td>
            </tr>
            <tr>
                <td>week</td>
                <td><input type="week" id="Week" /></td>
            </tr>
            <tr>
                <td>datetime-local</td>
                <td><input type="datetime-local" id="DateTimeLocal" /></td>
            </tr>
            <tr>
                <td><input type="reset" value="重置"/></td>
                <td><input type="submit" value="提交" /></td>
            </tr>
        </table>
    </form>
</body>
</html>


controller代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult DoSubmit(StudentModel model)
        {
            return Json(model);
        }
    }
    public class StudentModel
    {
        public string UserName { get; set; }
        public string Password { get; set; }
        public string ConfirmPassword { get; set; }
    }
}


曹振华
关注
专栏目录
html5表单validate无效果,jQuery Validate插件实现表单强大的验证功能
weixin_36337122的博客
06-04 431
jQuery Validate插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。第一节：jQuery Validation让验证变得如此容易一、官网下载jquery，和jquery validation plugin二、引入文件三、接下来,声明下面的HTML片段姓名:密码...
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
weixin_39587113的博客
06-22 644
这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：1.正则表达式的基本了解其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍...
html5Validate:基于HTML5新特性新规范的表单验证jQuery插件
06-25
jquery-html5Validate.js 基于HTML5表单验证的jQuery插件。 其他说明 支持type="email", type="number", type="tel", type="url", type="zipcode", 以及多type, 如type="email|tel". 支持 step, min, max, required, pattern, multiple 有4个自定义扩展属性 data-key, data-target, data-min, data-max 测试页面： 更多信息请参考这里： 优势？ 基于HTML5表单规范，无缝承接，UI进化；遵循浏览器验证机制，面向未来，更好的易用性。 许可 MIT许可 捐赠
jQuery html5Validate基于HTML5表单验证插件
weixin_30398227的博客
10-10 421
一、前言 前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！ 目前市面上有不少表单验证插件，看似强大，实在糟糕！ 总结下，有以下一些问题： 过多干预包括：改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括：需要特定结构的布局，需要特定的类名或者ID 学习成本包括：N多元作者自定义的属性，或者自定义的特定的数据结构 可用性 当JS...
HTML5 Validators 开源项目教程
最新发布
gitblog_00728的博客
08-25 631
HTML5 Validators 开源项目教程 html5_validatorsA gem/plugin for Rails 3, Rails 4, Rails 5, and Rails 6 that enables client-side validation using ActiveModel + HTML5 Form Validation项目地址:https://gitcode.com/g...
HTML5 表单验证
weixin_34062469的博客
03-16 129
2019独角兽企业重金招聘Python工程师标准>>> ...
h5Validate - 简单易用的 HTML5 表单验证工具
gitblog_00004的博客
03-10 1080
h5Validate - 简单易用的 HTML5 表单验证工具 概述 h5Validate 是一个轻量级的 JavaScript 库，用于在网页中实现 HTML5 表单验证功能。它能够帮助开发者轻松地处理表单数据验证，并提供友好的用户体验。 通过使用 h5Validate，您可以确保用户输入的数据符合您的业务需求，从而减少服务器端处理错误信息的工作量。同时，该库还支持自定义验证规则，以满足您项目...
HTML5 表单验证失败的提示语问题
09-27
HTML5引入了一套新的表单验证机制，它能够帮助前端开发者轻松地实现表单验证功能，无需编写大量JavaScript代码。HTML5表单验证失败的提示语问题指的是在表单验证失败时，默认提示信息并不够友好和明确，往往只提示...
html5手机登录表单验证代码
04-02
在HTML5中，表单验证主要通过以下方式实现： 1. **自定义标签属性**：HTML5允许开发者使用`<input>`标签的属性来指定输入类型的规则。例如，`type="email"`用于邮箱验证，`type="tel"`用于电话号码验证。这些内置的...
Validate实现表单验证
06-01
`form3.html`、`index.html`、`form1.html`、`form4.html`、`form2.html`、`form5.html`这些文件很可能是包含示例表单的HTML页面，展示了如何在不同的场景下使用`jQuery Validate`进行表单验证。开发者可以通过查看...
jQuery html5Validate表单验证插件
01-04
html5Validate支持HTML5验证相关的东西，如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等，并有一些本地化扩展，如增加了type="zipcode"邮编等，支持type="hidden"的完整验证（HTML5中是忽略的），支持多type共存，例如type="email|tel", 可以让文本框输入邮箱或者手机号码,下载的朋友请保留插件原作者的信息。
html5 validate,HTML 5 Validation
weixin_29137997的博客
06-29 152
The HTML5Validation plugin for CKEditor extends the core Forms plugin adding a Form Validation tab onto several elements. This allows you to add HTML5 Form Validation attributes onto your forms inside...
html5Validate表单验证插件
一只蠢村花的博客
08-16 1799
张鑫旭博客： https://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/ 使用方法 使用方法: var flag = $.html5Validate.isAllpass($("#addRoleForm")); if(!flag){ return; }...
htmL5 html5Validate
weixin_30641465的博客
11-17 89
http://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/ 转载于:https://www.cnblogs.com/lgjc/p/6072635.html
html form validate,validate_form.js: HTML form validation
weixin_29541695的博客
06-20 155
AfghanistanAland IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua and BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBeliz...
html form validate,html - Validate form with Javascript - Stack Overflow
weixin_39765280的博客
06-20 113
I am trying to get a validation process to work using Javascript, my form has four radio buttons and one submit button, and I wanted to make it so if the user clicks submit and no radio buttons are se...
html5 form validate,form_validate.html
weixin_34135138的博客
06-15 261
- 表单验证 jQuery ValidationjQuery Validate 简介选项1选项2jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：安装简单内置超过20种数据验证方法直列错误提示信息可扩展的数据验证方法使用内置的元数据或插件选项来指定您的验证规则优雅的交互设计官网：http://jqueryvalidation.org/简单示例选项1选项2...
html5validate ajax提交,jquery插件-Validation，Ajax全接触
weixin_42097967的博客
06-11 239
jquery插件-Validation1、基本验证方法【required必填，remote远程效验，minlength最小长度，maxlength最大长度，rangelength长度范围，min最小值，max最大值，range值范围，email Email格式，url URL格式，date 日期，dateISO ISO日期(只能是年月日)，number 数字，digits整数，equalTo与另一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值