使用validate.js实现表单数据提交前的验证方法

现在我正在学习ASP.NET。就表单验证而言，有两种方法很方便，除了前面的傻瓜方式中的每个表单选项都由一个函数进行验证。今天我介绍第一个，前端表单验证的方法，——，基于validate.js

注意哟，下面我会把带截图的代码挂出来，然后我会把完整的代码贴出来并提供复制粘贴，所以不要急着敲！

1.下载并导入validate.js

首先，我们需要下载一个validate.js文件，可以从JQuery官网或者csdn下载。

下载后，创建一个新的html文件，然后将jquery.js文件和validate.js引入html代码。我将在这里创建一个名为formCheck.html的新文件，如下图所示：

在这里，为了让表单以后看起来更好，我引入了layui.css的样式文件

2.创建表单

3.使用validate.js验证表单数据

同样，让我们直接看代码截图：

除了这些检查方法，validate.js还封装了包括邮件格式验证、电话号码格式验证等在内的验证违规。使用方法与上图中的数字一致，想了解更多的同学可以自行查看具体的js内容。在上图的代码中，规则部分定义了输入数据的规范，消息设置了错误提示信息。

4.检查结果

这种验证方法还是很简单方便的。在js插件的帮助下，数据验证可以很容易地完成。我希望这个简单的演示可以帮助像我这样的鸡。先写到这里吧。去睡觉吧。晚安！

对了，差点忘了给你完整的代码。请接受：

！doctype HTML HTML Head Metacharset=' UTF-8 ' Title前端表单验证/Title Link Rel=' Style Sheet ' Type=' Text/CSS ' href=' LaYUI-v 2 . 3 . 0/LaYUI/CSS/LaYUI . CSS ' Rel=' external no follow '/script src=' http :3358 libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script Type=' Text/JavaScript ' srcheight: 300pxmargin: auto相对位置：top: 100px}/style/head body form action=' form check . html ' method=' post ' Div id=' form-box ' class=' layui-form layui-form-pane ' Div class=' layui-form-item ' label class=' layu I-form-label '用户名/label Div class=' layui-input-input ' type=' text ' name=' username ' class=' layui-input '/Div/Div class=' layui-form-item ' label class=' layui-form-label ' label 'validate({ rule s : { username : { required d : true，//此项表示此字段为必填字段。maxlength: 5 //表示此字段的最大长度为5}，password : { required d : true，number 3360 true//表示此字段必须是数字}}。message s : { username : { required d : ' * required '，maxlength3360' *最多5个字符' }，password 3360 { required d 3360 ' * required '，number3360' *必须是合法数字' } } } }))；/script/html摘要

以上是边肖引入的validate.js在提交之前验证表单数据的用法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！