php js 表单,javascript基础 之 表单

1，js可以验证表单

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

//html表单是这样的

名字:

//js验证表单的程序

functionvalidateForm() {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之间的数字(和表单还是有些不同)

JavaScript 验证输入

请输入 1 到 10 之间的数字：

提交

functionmyFunction() {varx, 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;

}

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

//老子是表单，提交的时候会把信息传给action指定的文件，方法按照post来

//意思：我是一个文本框，名字是fname(用于接收端定位信息)，以定要有信息才能被提交。

点击提交按钮，如果输入框是空的，浏览器会提示错误信息。

2，约束验证(dom属性)

1，必填项目验证

functionvalidateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){

alert("姓必须填写");return false;

}

}

姓:

//运行流程：点击提交->执行函数验证->文本框为空的话函数会提示并且返回false->onsubmit会return false，阻止提交

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

3,dom验证方法，如下

输入数字并点击验证按钮:

验证

如果输入的数字小于 100 或大于300，会提示错误信息。

functionmyFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) { //查看一下inpObj的属性是否合法

document.getElementById("demo").innerHTML =inpObj.validationMessage; //浏览器提示的错误信息

}else{

document.getElementById("demo").innerHTML = "输入正确";

}

}

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

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