css数字类型表单显示非负数_【JavaScript 】表单验证

表单

HTML 表单验证可以通过 JavaScript 来完成。

示例：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

HTML 表单自动验证：

HTML 表单验证也可以通过浏览器来自动完成。如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

"demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">

数据验证数据验证用于确保用户输入的数据是有效的。

典型的数据验证有：

• 必需字段是否有输入?

• 用户是否输入了合法的数据?

• 在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据。数据验证可以使用不同方法来定义，并通过多种方式来调用。服务端数据验证是在数据提交到服务器上后再验证。客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证(constraint validation)。约束验证是表单被提交时浏览器用来实现验证的一种算法。 

HTML 约束验证基于： 

• HTML 输入属性 

• CSS 伪类选择器 

• DOM 属性和方法

约束验证 HTML 输入属性

disabled 规定输入的元素不可用
max   规定输入元素的最大值
min   规定输入元素的最小值
pattern 规定输入元素值的模式
required 规定输入元素字段是必需的
type    规定输入元素的类型

约束验证 CSS 伪类选择器

:disabled 选取属性为 "disabled" 属性的 input 元素
:invalid 选取无效的 input 元素
:optional 选择没有"required"属性的 input 元素
:required 选择有"required"属性的 input 元素
:valid 选取有效值的 input 元素

示例

/*是否带有小数*/
function    isDecimal(strValue ) {
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);
}

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/
    return reg.test(str); /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/; /*定义验证表达式*/
    return reg.test(str); /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}
/**
 * [reg 百度网盘链接匹配]
 * 说明：匹配支持百度分享的两种链接格式
 * 格式一：链接: https://pan.baidu.com/s/15gzY8h3SEzVCfGV1xfkJsQ 提取码: vsuw 复制这段内容后打开百度网盘手机App，操作更方便哦
 * 格式二：http://pan.baidu.com/share/link?shareid=179436&uk=3272055266 提取码: vsuw 复制这段内容后打开百度网盘手机App，操作更方便哦
 * 匹配出下载地址和提取码，并且还支持如果没有提取码，也能匹配出下载链接。
 * @type {正则表达式}
 * @return array 返回匹配成功的链接和地址
 */

function baiduDownLinkArr( string ){
  var reg = /([http|https]*?:\/\/pan\.baidu\.com\/[(?:s\/){0,1}|(share)]*(?:[0-9a-zA-Z?=&])+)(?:.+:(?:\s)*)?([a-zA-Z]{4})?/;
  console.log(reg.exec(string));
}

完

  码上加油站

  一起来加油

长按扫码关注

点“在看”你懂得