四则运算的表单验证

最新推荐文章于 2021-06-25 12:39:11 发布

wujy_rrycbar2016

最新推荐文章于 2021-06-25 12:39:11 发布

阅读量490

点赞数 1

分类专栏：作业回顾文章标签： js

本文链接：https://blog.csdn.net/wujy_rrycbar2016/article/details/80111407

版权

本文介绍了一个HTML表单验证四则运算相关数据的实现，包括必填项的题目数量和算式运算范围的限制。通过使用HTML5的`required`属性确保必填项非空，并设置特定的数值范围进行逻辑校验，如题目数量限定在1-1000的整数，算式的数值范围设定为1-100和50-1000的整数，同时强调题目的下界必须小于上界，以避免后台生成题目时的问题。验证逻辑主要通过JavaScript实现。

摘要由CSDN通过智能技术生成

html:

<form method="post" name="chuti" action="AtithControlle?flag=chuti" οnsubmit="return checkform()">
		<!-- 每次出题时用户都可以在界面上定制如下参数：题目数量，算式数值范围（包括原始题目与运算过程中所有中间结果的绝对值的数值范围），题目中最多有多少个运算符，题目中是否包含乘除法，题目中是否包含括号。在点击相应出题按钮后将生成题目文件（不包含答案）到 result.txt 中。 -->
		<!-- 加表单验证是否为数字 -->
		<div class="detail">
			<label>
				<span class="form-group tishi lan" style="letter-spacing: 4px;">题 目 数 量</span>
				<!-- 用required和星号来设置必填项 -->
				<input type="text" name="count" id="count" placeholder="必须为1-10000整数" class="lan" required />
			</label>
			<b id="countb"></b>
		</div>
		<div class="detail">
			<label>
				<span class="form-group tishi lan" style="letter-spacing: 2px;">算式数值范围</span>
				<input type="text" name="rangeLow" id="rangeLow" required/>
				<span>——</span>
				<input type="text" name="rangeHigh" id="rangeHigh" required/>
			</label>
			<b id="rangebL"></b>
			<b id="rangebH"></b>
		</div>

		
		    <div id="js-example-change-value" class="detail">
				<span class="tishi lan">运算符的最大数目</span>
                <input type="range" min="1" max="10" value="1" data-rangeslider name="opeMax">
                <output&