文本框的多个最小值和最大值

时间:2016-03-19 07:45:02

标签: javascript jquery angularjs html5

我有一个工作代码,可以使用以下代码在文本框中输入有效的最小值和最大值:

<input type="number" name="quantity" min="1" max="5">

但如果允许多个范围怎么样?例如:在我的文本框中,允许从1到5和10到15的数字,因此数字从6-9和16&amp;不允许起来。如何使用javascript / jquery或angularjs做到这一点?

5 个答案:

答案 0 :(得分:3)

您可以使用html5 pattern属性

<input type="text" name="quantity" pattern= "(1|2|3|4|5|10|11|12|13|14|15)" /> 

有关详细信息,请参阅here on the MDN网站。

答案 1 :(得分:1)

感谢所有答案。我尝试了所有,但我通过使用if / else语句得到了它。

if (txt>=1 && txt<=5){
  return true
}
if (txt>=10 && txt<=15){
  return true
}
if (txt>=20 && txt<=25){
  return true
}else{
  alert("invalid")
  return false
}

答案 2 :(得分:0)

为什么不使用public class adap_Mive extends BaseAdapter { Context contextt; private LayoutInflater myInflater; public List<dm_Mive> list; public adap_Mive(Context context) { myInflater = LayoutInflater.from(context); contextt = context; } @Override public int getCount() { return list.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } public void setData(List<dm_Mive> list) { this.list = list; } public void clearData() { // clear the data list.clear(); } Holder holder = null; @Override public View getView(final int position, View convertView, final ViewGroup parent) { if (convertView == null) { convertView = myInflater.inflate(R.layout.list_custom_froot, parent, false); holder = new Holder(); holder.tv_lbl_name = (TextView)convertView.findViewById(R.id.txt_title) ; holder.tv_lbl_details = (TextView)convertView.findViewById(R.id.txt_weight ); holder.tv_lbl_price = (TextView)convertView.findViewById(R.id.txt_price) ; holder.txt = (TextView)convertView.findViewById(R.id.txt_meghda r); holder.tv_img_pic = (ImageView)convertView.findViewById(R.id.img); holder.btn2 = (ImageButton)convertView.findViewById(R.id.btn_kam ); holder.btn1 = (ImageButton)convertView.findViewById(R.id.btn_zia d); holder.btn_more = (ImageButton)convertView.findViewById(R.id.btn_mor e); convertView.setTag(holder); } else { holder = (Holder) convertView.getTag(); } holder.tv_lbl_name.setText ((list.get(position).getname())); holder.tv_lbl_details.setText ((list.get(position).getdetails())); holder.tv_lbl_price.setText ((list.get(position).getprice())); holder.btn1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { holder.txt.setText("10"); } }); holder.btn2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { holder.txt.setText("9"); } }); String profpic = list.get(position).getbmp(); String Image_Name = null; String pic[] = profpic.split("/"); for (String item : pic) { Image_Name = item; } File extStore = Environment.getExternalStorageDirectory(); File picDir = new File(extStore, "Froot"); File file = new File(picDir, Image_Name); String ProfPic = file.toString(); File f = new File(file.toString()); if(f.exists()) { holder.tv_img_pic.setImageURI (Uri.parse(ProfPic)); } else { Picasso.with(contextt) .load(profpic) .into(holder.tv_img_pic); Mod_Dwonload_File mdf = new Mod_Dwonload_File(); mdf.Download_Adapter_Files(profpic); } return convertView; } public static class Holder { public boolean needInflate; TextView tv_lbl_name; TextView tv_lbl_details; TextView tv_lbl_price; ImageView tv_img_pic; TextView txt; ImageButton btn1; ImageButton btn2; ImageButton btn_more; } }

<select>

答案 3 :(得分:0)

试试这个

    <form name="form1" action="">
        <input type="text" name="quantity" pattern="[1-9][0-9]{2}|1000|2[0-9]{3}|3000" />
        <input type="submit" value="submit">
    </form>

https://jsfiddle.net/ecxqhjkp/1/

答案 4 :(得分:0)

要将视图与业务逻辑分离,您应该使用自定义验证器。

如果您使用了ngForm和ngModel作为输入字段,请执行以下操作:

<div ng-controller="InputController as inputCtrl">
  <ng-form name="testForm">
    <input type="text" name="testModel" ng-model="testModel"/>
  </ng-form>
</div>

您可以使用以下控制器:

app.controller('InputController', ['$scope', function($scope) {
    var validator = function(modelValue, viewValue) {
        var isRange1To5 = modelValue >= 1 && modelValue <= 5;
        var isRange10To15 = modelValue >= 10 && modelValue <= 15;

        return isRange1To5 || isRange10To15;
    };

    $scope.testForm.testModel.$validators['rangeValidator'] = validator;
}])

min / max指令(和其他指令)就像这样工作。他们为模型添加了一个验证器 - 每次输入更改时都会执行验证器。

有关详细信息,请参阅Angular关于此问题的文档: https://docs.angularjs.org/guide/forms#custom-validation