javascript基础 之 表单

1,js可以验证表单

实例1,js获取表单的内容

//html表单是这样的
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

//js验证表单的程序
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

//注意这个表单返回的是布尔值,而html表单里的onsubmit是“return false”或者“return true”
//其实道理很简单,但是格式需要记住:表单信息获取是document.forms['表单名']['表单下的元素名'].value 其实有点像python里的raw_input

实例2:验证文本框里是否输入了1-10之间的数字(和表单还是有些不同)

<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字:</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "输入错误";
    } else {
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

 实例3,表单自动验证,内容是属于js的范围,但是书写形式不是直接敲代码,而是把HTML和js融合了

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_form.php" method="post">   //老子是表单,提交的时候会把信息传给action指定的文件,方法按照post来
  <input type="text" name="fname" required="required">    //意思:我是一个文本框,名字是fname(用于接收端定位信息),以定要有信息才能被提交。
  <input type="submit" value="提交">
</form>
<p>点击提交按钮,如果输入框是空的,浏览器会提示错误信息。</p>
</body>
</html>

2,约束验证(dom属性)

1,必填项目验证

</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
}
</script>
</head>
<body>
    
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
//运行流程:点击提交->执行函数验证->文本框为空的话函数会提示并且返回false->onsubmit会return false,阻止提交

2,数据格式验证,比如电子邮箱验证

  思想上和上面的差不多,函数内部可以用js的正则表达式匹配:教程:https://www.jb51.net/article/126866.htm

3,dom验证方法,如下

<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300,会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {    //查看一下inpObj的属性是否合法
        document.getElementById("demo").innerHTML = inpObj.validationMessage;    //浏览器提示的错误信息
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>
</body>

checkValidity():如果 input 元素中的数据是合法的返回 true,否则返回 false。

setCustomValidity():设置 input 元素的 validationMessage 属性,用于自定义错误提示信息的方法。

原文地址:https://www.cnblogs.com/0-lingdu/p/9807814.html